Difference between revisions of "Dev/Forms"

 
(61 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;
 +
}
 +
 +
 +
#permission_view::before {
 +
content: "view";
 +
}
 +
 +
 +
#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">
 
<script type="text/javascript">
Line 16: Line 70:
  
 
</script>
 
</script>
 +
 +
 +
<script src="https://igem.org/wiki/index.php?title=HQ:Dev_Forms.js&action=raw&ctype=text/javascript"></script>
 +
  
  
Line 60: Line 118:
  
 
<h2> Team Selection </h2>  
 
<h2> Team Selection </h2>  
−
 
  
  
 
<div class="column half_size">
 
<div class="column half_size">
 +
  
 
<p class="question">
 
<p class="question">
Line 76: Line 134:
 
</div>
 
</div>
  
−
<div class="column half_size" id="aj_form_error_inner_div">
+
<!-- <div class="column half_size software_messages"> -->
  
 +
 +
<div class="column half_size">
 +
<p> Current message:  <span id="software_messages"> </span> </p>
 +
 +
<p> Welcome, <span id="user_name_placeholder"></span> !</p>
 +
 +
 +
<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>
 
</div>
Line 87: Line 165:
 
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
  
−
CONTACT INFORMATION
+
SECTION 1
  
 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
 
+
<form>
 
<fieldset>
 
<fieldset>
  
Line 99: Line 177:
 
 
  
 +
 
<!------------------------------------------------------------ Question 1 ------------------------------------------------------------->
 
<!------------------------------------------------------------ Question 1 ------------------------------------------------------------->
  
−
<p class="question"> Name <input type="text" data-form-field="example_name" placeholder="Name"></p>
+
 
 +
<p class="question">1. Name <input type="text" name="example_text" data-form-field="example_text" placeholder="Place text here"></p>
 +
 
  
 
<!------------------------------------------------------------ Question 2 ------------------------------------------------------------->
 
<!------------------------------------------------------------ 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>
  
−
</div>
 
  
 +
<!------------------------------------------------------------ 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>
 +
 +
 +
<p class="question">Save? </p>
 +
<div id="save_form"> SAVE FORM<div>
 +
</div>
  
 
</fieldset>
 
</fieldset>
 +
  
  
Line 116: 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?