Difference between revisions of "Dev/Forms"

 
(65 intermediate revisions by the same user not shown)
Line 5: Line 5:
 
<link rel="stylesheet" type="text/css" href="https://igem.org/wiki/index.php?title=HQ:Forms.css&action=raw&ctype=text/css" />
 
<link rel="stylesheet" type="text/css" href="https://igem.org/wiki/index.php?title=HQ:Forms.css&action=raw&ctype=text/css" />
  
 +
<style>
 +
.software_messages {
 +
display: block;
 +
margin: 30px auto 20px auto;
 +
width: 40%;
 +
text-align: center;
 +
border: 1px solid #fdb9b9;
 +
padding: 15px 0px;
 +
border-radius: 5px;
 +
background-color: rgba(255, 228, 232, 0.71);
 +
}
  
  
 +
.super_user_view, #permission_edit, #permission_submit {
 +
display:none;
 +
}
  
 +
#permission_view {
 +
display: initial;
 +
}
  
−
<div class="column full_size">
 
−
<h1>Safety Form</h1>
 
  
−
<p>This form is for you to tell us all about your project, the organisms/parts you are using, the potential risks of your project, and what you are doing to reduce those risks.</p>
+
#permission_view::before {
 +
content: "view";
 +
}
  
−
</div>
 
  
−
<div class="clear extra_space"></div>
+
#permission_edit::before {
 +
content: "edit";
 +
}
  
  
 +
#permission_submit::before {
 +
content: "submit";
 +
}
  
 +
 +
#save_form {
 +
background-color:red;
 +
font-weight: bold;
 +
padding: 15px;
 +
cursor:pointer;
 +
color: white;
 +
border-radius: 5%;
 +
width: 10%;
 +
text-align:center;
 +
}
 +
 +
#save_form:hover{
 +
background-color:white;
 +
color:red;
 +
}
 +
 +
</style>
 +
 +
<script type="text/javascript">
 +
 +
var form_info = {
 +
name:"Example_Form",
 +
year: "2017",
 +
owner: "user",
 +
ajax_URL: "https://2017.igem.org/cgi/forms/form.cgi"
 +
};
 +
 +
</script>
 +
 +
 +
<script src="https://igem.org/wiki/index.php?title=HQ:Dev_Forms.js&action=raw&ctype=text/javascript"></script>
 +
 +
 +
 +
 +
 +
 +
<div class="column full_size">
 +
<h1>Example Form</h1>
 +
<p>This is the example form you can use to create new ones! </p>
 +
</div>
 +
 +
<div class="clear extra_space"></div>
  
  
Line 35: Line 100:
  
  
−
<div class="column full_size" style="text-align:center; margin:auto;"><h1> Safety Form </h1> </div>
+
<div class="column full_size" style="text-align:center; margin:auto;"><h1> Example Form </h1> </div>
 
<div class="clear"></div>
 
<div class="clear"></div>
 
<div class="line_divider"></div>
 
<div class="line_divider"></div>
Line 49: Line 114:
 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
−
<div id='aj_form_errors'> </div>
 
  
 +
<fieldset>
  
 +
<h2> Team Selection </h2>
  
  
 +
<div class="column half_size">
  
  
−
<fieldset>
+
<p class="question">
 +
<span id="prompt_to_choose_team"> Please choose a team</span>
 +
</p>
  
−
<h2> Team Selection </h2>
 
  
−
<div id="formtitlemodewrapper" class="column half_size">
+
<select id="team_list_dropdown">
−
<p class="question">
+
<option id="no_team_selected" value="">Please choose team...</option>
−
<!-- <span id="form_title_display"></span> --> <span id="owner_name_display"></span> <span id="prompt_to_choose_team"> Please choose a team</span>
+
</select>
−
</p>
+
  
−
<h4 id="modes"></h4>
 
−
 
−
<select id="team_list_dropdown">
 
−
<option id="no_team_selected" value="">Choose team...</option>
 
−
</select>
 
 
</div>
 
</div>
  
 +
<!-- <div class="column half_size software_messages"> -->
  
  
 +
<div class="column half_size">
 +
<p> Current message:  <span id="software_messages"> </span> </p>
  
−
<div id="submitted_warning"  class="column half_size">
+
<p> Welcome, <span id="user_name_placeholder"></span> !</p>
−
<p>This form has been submitted.</p>
+
−
<p>You can <a href="#" id="popwin_unsubmit">unsubmit the form</a> if you wish to make further edits.</p>
+
−
<p><a href="#" id="popwin_dismiss">Click here to dismiss this message</a></p>
+
−
</div>
+
  
 +
 +
<p class="super_user_view"> </p>
 +
 +
<br>
 +
 +
<p> You selected team: <span id="team_id_placeholder" class="refresh_for_new_form"> </span> </p>
 +
 +
 +
<p> Are you in this team?  <span id="user_in_roster" class="refresh_for_new_form"> </span> </p>
 +
 +
<p> Your role is:  <span id="user_role" class="refresh_for_new_form"> </span> </p>
 +
 +
 +
<p> You can:  <span id="permission_view"> </span>  -  <span id="permission_edit"> </span> -  <span id="permission_submit"> </span> this form </p>
 +
 +
</div>
  
 
</fieldset>
 
</fieldset>
Line 88: Line 165:
 
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  
−
CONTACT INFORMATION
+
SECTION 1
  
 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
 
+
<form>
 
<fieldset>
 
<fieldset>
  
  
−
<div class="column half_size">
+
<div class="column full_size">
−
<div id="private_contact_information">
+
 
−
<h2>1.-  Contact Information </h2>  
+
<h2>1.-  Section Title  </h2>  
−
<p>Name <input type="text" name="Team member Name" data-form-field="corr_team_member_name" placeholder="Name"></p>
+
−
<p>Email <input type="text" name="Team member Email" data-validate-as="email" class="validate-on-change" data-form-field="corr_team_member_email" placeholder="Email"></span></p>
+
 
−
</div>
+
−
</div>
+
<!------------------------------------------------------------ Question 1 ------------------------------------------------------------->
 +
 
 +
 
 +
<p class="question">1. Name <input type="text" name="example_text" data-form-field="example_text" placeholder="Place text here"></p>
 +
 
 +
 
 +
<!------------------------------------------------------------ Question 2 ------------------------------------------------------------->
 +
 
 +
<p class="question">2. Example radio select </p>
 +
<ul>
 +
<li><label><input type="radio" data-form-field="example_radio_1" value="radio_option_1"> Option 1 </label></li>
 +
<li><label><input type="radio" data-form-field="example_radio_2" value="radio_option_2"> Option 2 </label></li>
 +
<li><label><input type="radio" data-form-field="example_radio_3" value="radio_option_3"> Option 3 </label></li>
 +
</ul>
 +
 
 +
 
 +
<!------------------------------------------------------------ Question 3 ------------------------------------------------------------->
 +
 
 +
<p class="question">3. Example text area </p>
 +
 
 +
<textarea rows="3" data-form-field="example_textarea"> </textarea>
 +
 
 +
 
 +
<!------------------------------------------------------------ Question 4 ------------------------------------------------------------->
 +
 
 +
<p class="question">4. Example checkbox </p>
 +
 
 +
<ul>
 +
<li><label><input type="checkbox" data-form-field="checkbox_option_1" value="checkbox_option_1"> Option 1 </label></li>
 +
<li><label><input type="checkbox" data-form-field="checkbox_option_2" value="checkbox_option_2"> Option 2 </label></li>
 +
<li><label><input type="checkbox" data-form-field="checkbox_option_3" value="checkbox_option_3"> Option 3 </label></li>
 +
</ul>
 +
 
 +
<!------------------------------------------------------------ Question 5 ------------------------------------------------------------->
 +
 
 +
<p class="question">5. Example dropdown </p>
 +
 
 +
<select data-form-field="example_dropdown">
 +
<option value="0">0</option>
 +
<option value="1">1</option>
 +
<option value="2">2</option>
 +
</select>
 +
 
  
−
<div class="column half_size message_box">
+
<p class="question">Save? </p>
−
<h4> Note </h4>
+
<div id="save_form"> SAVE FORM<div>
−
<p>It is your responsibility to demonstrate that your work is safe. The easiest way to do this is through a well-researched and comprehensive safety form.</p>
+
 
</div>
 
</div>
  
 
</fieldset>
 
</fieldset>
 +
  
  
Line 114: Line 233:
 
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  
−
ABOUT OUR LAB
+
SUBMIT
  
 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
  
 
<fieldset>
 
<fieldset>
−
<h2>2.- About our Lab </h2>
 
−
<p> This part of the form is for you to tell us about your laboratory space and your safety equipment. If you need help, please consult your faculty advisor or laboratory manager. You can also read the <a href="https://2017.igem.org/Safety">Safety page</a> and the <a href="https://2017.igem.org/Safety/Risk_Groups">Risk Groups page</a> for basic information about different types of biology labs. </p>
 
  
−
<!--------------------------------------------------------------------------------------------- Question 1 --------------------------------------------------------------------------------------------------------->
 
  
  
−
<p class="question">1. Please upload a photo or two of your lab, preferably showing the relevant safety features and paste the link here:</p>
 
−
<textarea rows="1" name="Lab Photograph" data-form-field="lab_photo"></textarea>
 
  
  
−
<!--------------------------------------------------------------------------------------------- Question 2 --------------------------------------------------------------------------------------------------------->
+
<div class="column full_size">
 +
 
 +
 
 +
 
 +
<p class="question"> Submit form? </p>
 +
 
 +
<input type="submit" data-form-field="example_submit" value="SUBMIT FORM"></p>
 +
 
 +
</div>
 +
</fieldset>
 +
</form>
 +
 
 +
 
 +
</div> <!-- end of formbody -->
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!------------------------------------------------------------SAFETY LOADING DATA TESTS -------------------------------------------------------
 +
 
 +
 
 +
 
 +
<p>Name <input type="text" name="Team member Name" data-form-field="corr_team_member_name" placeholder="Name"></p>
 +
 
 +
 
 +
 
 +
 
 +
<p class="question">7. Who is responsible for the safety of biology labs at your institution? What are the guidelines for laboratory biosafety? Please give a link to these guidelines, or briefly describe them if you cannot give a link.</p>
 +
<textarea rows="3" name="7. Your institution's biosafety" data-form-field="institution_biosafety"></textarea>
 +
 
 +
 
  
  
 
<h3> Biosafety Level </h3>
 
<h3> Biosafety Level </h3>
−
<p class="question">2. What is the Safety Level of your lab? <a target="_blank" href="https://2016.igem.org/Safety/Risk_Groups">[Help about Risk Groups and Safety Levels]</a></p>
+
<p class="question">2. What is the Safety Level of your lab? </p>
  
−
<div class="column half_size">
 
 
<ul>
 
<ul>
−
<li><label><input type="radio" name="1. Lab Safety Level" data-form-field="lab_bsl" value="bsl_1"> Level 1 (low risk)</label></li>
+
<li><label><input type="radio" name="lab_safety_level" data-form-field="lab_bsl" value="bsl_1"> Level 1 (low risk)</label></li>
−
<li><label><input type="radio" name="1. Lab Safety Level" data-form-field="lab_bsl" value="bsl_2"> Level 2 (moderate risk)</label></li>
+
<li><label><input type="radio" name="lab_safety_level" data-form-field="lab_bsl" value="bsl_2"> Level 2 (moderate risk)</label></li>
 
<li style="color: #a0a0a0;"><label><span class="wrapper"><input type="radio" disabled id="bsl_3"></span> Level 3 (high risk)</label></li>
 
<li style="color: #a0a0a0;"><label><span class="wrapper"><input type="radio" disabled id="bsl_3"></span> Level 3 (high risk)</label></li>
 
<li style="color: #a0a0a0;"><label><span class="wrapper"><input type="radio" disabled id="bsl_4"></span> Level 4 (extreme risk)</label></li>
 
<li style="color: #a0a0a0;"><label><span class="wrapper"><input type="radio" disabled id="bsl_4"></span> Level 4 (extreme risk)</label></li>
−
<li><label><input type="radio" name="1. Lab Safety Level" data-form-field="lab_bsl" value="bsl_none"> Our team is not doing any wet-lab work</label></li>
+
<li><label><input type="radio" name="lab_safety_level" data-form-field="lab_bsl" value="bsl_none"> Our team is not doing any wet-lab work</label></li>
 +
<li><label><input type="radio" name="lab_safety_level"  data-form-field="lab_bsl" value="bsl_other"> Other safety level:</label> <textarea rows="2" name="Other safety level (describe)" data-form-field="bsl_other_describe" data-validation="[value=bsl_other]" placeholder="Please describe"></textarea></li>
 +
 
 +
<li><label><input type="radio" name="lab_safety_level" data-form-field="lab_bsl" value="bsl_multiple"> We have several different lab spaces with different Safety Levels:</label> <textarea rows="2" name="Different safety levels (describe)" data-form-field="bsl_multiple_describe" data-validation="[value=bsl_multiple]" placeholder=" Please describe what experiments you do in each space"></textarea></li>
 +
 
 +
 
 +
<li><label><input type="radio"name="lab_safety_level"  data-form-field="lab_bsl" value="bsl_unknown"> Unknown (please comment):</label> <textarea rows="2" name="Safety level unknown (comment)" data-form-field="bsl_unknown_describe" data-validation="[value=bsl_unknown]" placeholder="Please describe"></textarea></li>
 
</ul>
 
</ul>
−
</div>
 
  
−
<div class="column half_size message_box">
 
−
<h4> Note </h4>
 
−
<p>
 
−
iGEM teams should not use Risk Group 3 or 4 organisms, and they should not work in Safety Level 3 or 4 labs.
 
−
If you are planning to work at Safety Level 3 or 4, contact safety (AT) igem (DOT) org right away!!
 
−
</p>
 
−
</div>
 
−
<div class="clear"></div>
 
−
<ul>
 
−
<li><label><input type="radio" name="1. Lab Safety Level" data-form-field="lab_bsl" value="bsl_other"> Other safety level:</label> <textarea rows="2" name="Other safety level (describe)" data-form-field="bsl_other_describe" data-validation="[value=bsl_other]" placeholder="Please describe"></textarea></li>
 
  
−
<li><label><input type="radio" name="1. Lab Safety Level" data-form-field="lab_bsl" value="bsl_multiple"> We have several different lab spaces with different Safety Levels:</label> <textarea rows="2" name="Different safety levels (describe)" data-form-field="bsl_multiple_describe" data-validation="[value=bsl_multiple]" placeholder=" Please describe what experiments you do in each space"></textarea></li>
 
  
  
−
<li><label><input type="radio" name="1. Lab Safety Level" data-form-field="lab_bsl" value="bsl_unknown"> Unknown (please comment):</label> <textarea rows="2" name="Safety level unknown (comment)" data-form-field="bsl_unknown_describe" data-validation="[value=bsl_unknown]" placeholder="Please describe"></textarea></li>
 
−
</ul>
 
  
  
−
</fieldset>
+
<p class="question">5. Please briefly describe the topics that you learned about (or will learn about) in your safety training.</p>
  
 +
<ul>
 +
<li><input type="checkbox"  name="learn" data-form-field="learn_lab_access" value="learn_lab_access_and_rules"> Lab access and rules (including appropriate clothing, eating and drinking, etc.) </label></li>
 +
<li><input type="checkbox" name="learn" data-form-field="learn_responsible" value="learn_responsible"> Responsible individuals (such as lab or departmental specialist or institutional biosafety officer) </label></li>
 +
<li><input type="checkbox"  name ="learn" data-form-field="learn_biosafety_lvl" value="learn_biosafety_levels">Differences between biosafety levels </label></li>
 +
<li><input type="checkbox"  name="learn" data-form-field="learn_biosafety_equip" value="learn_biosafety_equipment">Biosafety equipment (such as biosafety cabinets) </label></li>
 +
<li><input type="checkbox" name="learn" data-form-field="learn_biosafety_microbal" value="learn_biosafety_good_microbal_technique"> Good microbial technique (such as lab practices)</label></li>
 +
<li><input type="checkbox" name="learn" data-form-field="learn_disinfection" value="learn_disinfection"> Disinfection and sterilization </label></li>
 +
<li><input type="checkbox" name="learn" data-form-field="learn_emergency" value="learn_emergency"> Emergency procedures </label></li>
 +
<li><input type="checkbox" name="learn" data-form-field="learn_transport" value="learn_transport"> Transport rules </label></li>
 +
<li><input type="checkbox" name="learn" data-form-field="learn_fire_elect" value="learn_chemicals_fire_electrical">Chemicals, fire and electrical safety </label></li>
 +
<li><input type="checkbox" name="learn" data-form-field="learn_other_m" value="learn_other"> We will not have safety training: </label> <textarea rows="2" name="learn" data-form-field="learn_other_describe" data-validation="[data-form-field=learn_other_m]" placeholder="Please comment"></textarea></li>
  
 +
</ul>
  
−
</div>
 
  
−
</div> <!-- end of formbody -->
+
 
 +
---->

Latest revision as of 21:18, 20 March 2018

MENU
Loading...


You have JavaScript disabled.

This page requires JavaScript in order to function correctly. Please enable JavaScript in your browser, then try again.

Example Form

This is the example form you can use to create new ones!

Example Form

Team Selection

Please choose a team

Current message:

Welcome, !


You selected team:

Are you in this team?

Your role is:

You can: - - this form

1.- Section Title

1. Name

2. Example radio select

3. Example text area

4. Example checkbox

5. Example dropdown

Save?

SAVE FORM

Submit form?