Difference between revisions of "Team:Melbourne/Safety"

(Prototype team page)
 
Line 3: Line 3:
  
  
−
<div class="column full_size">
+
<script>
 +
function openCity(cityName, elmnt, color) {
 +
    // Hide all elements with class="tabcontent" by default */
 +
    var i, tabcontent, tablinks;
 +
    tabcontent = document.getElementsByClassName("tabcontent");
 +
    for (i = 0; i < tabcontent.length; i++) {
 +
        tabcontent[i].style.display = "none";
 +
    }
  
−
<h1> Safety </h1>
+
    // Remove the background color of all tablinks/buttons
−
<p>Please visit the <a href="https://2018.igem.org/Safety">Safety Hub</a> to find this year's safety requirements & deadlines, and to learn about safe & responsible research in iGEM.</p>
+
    tablinks = document.getElementsByClassName("tablink");
 +
    for (i = 0; i < tablinks.length; i++) {
 +
        tablinks[i].style.backgroundColor = "";
 +
    }
  
−
<p>On this page of your wiki, you should write about how you are addressing any safety issues in your project. The wiki is a place where you can <strong>go beyond the questions on the safety forms</strong>, and write about whatever safety topics are most interesting in your project. (You do not need to copy your safety forms onto this wiki page.)</p>
+
    // Show the specific tab content
 +
    document.getElementById(cityName).style.display = "block";
  
−
</div>
+
    // Add the specific color to the button used to open the tab content
 +
    elmnt.style.backgroundColor = color;
 +
}
  
 +
// Get the element with id="defaultOpen" and click on it
 +
document.getElementById("defaultOpen").click();
 +
</script>
  
−
<div class="column two_thirds_size">
 
−
<h3>Safe Project Design</h3>
 
  
−
<p>Does your project include any safety features? Have you made certain decisions about the design to reduce risks? Write about them here! For example:</p>
 
  
−
<ul>
 
−
<li>Choosing a non-pathogenic chassis</li>
 
−
<li>Choosing parts that will not harm humans / animals / plants</li>
 
−
<li>Substituting safer materials for dangerous materials in a proof-of-concept experiment</li>
 
−
<li>Including an "induced lethality" or "kill-switch" device</li>
 
−
</ul>
 
  
−
</div>
 
  
−
<div class="column third_size">
+
<style>
−
<h3>Safe Lab Work</h3>
+
/* Style the tab buttons */
 +
.tablink {
 +
    background-color: #555;
 +
    color: white;
 +
    float: left;
 +
    border: none;
 +
    outline: none;
 +
    cursor: pointer;
 +
    padding: 14px 16px;
 +
    font-size: 17px;
 +
    width: 25%;
 +
}
  
−
<p>What safety procedures do you use every day in the lab? Did you perform any unusual experiments, or face any unusual safety issues? Write about them here!</p>
+
/* Change background color of buttons on hover */
 +
.tablink:hover {
 +
    background-color: #777;
 +
}
  
 +
/* Set default styles for tab content */
 +
.tabcontent {
 +
    color: white;
 +
    display: none;
 +
    padding: 50px;
 +
    text-align: center;
 +
}
  
−
<h3>Safe Shipment</h3>
+
/* Style each tab content individually */
 +
#London {background-color:red;}
 +
#Paris {background-color:green;}
 +
#Tokyo {background-color:blue;}
 +
#Oslo {background-color:orange;}
 +
</style>
  
−
<p>Did you face any safety problems in sending your DNA parts to the Registry? How did you solve those problems?</p>
+
 
 +
 
 +
 
 +
<body>
 +
<div id="London" class="tabcontent">
 +
  <h1>London</h1>
 +
  <p>London is the capital city of England.</p>
 
</div>
 
</div>
  
 +
<div id="Paris" class="tabcontent">
 +
  <h1>Paris</h1>
 +
  <p>Paris is the capital of France.</p>
 +
</div>
 +
 +
<div id="Tokyo" class="tabcontent">
 +
  <h1>Tokyo</h1>
 +
  <p>Tokyo is the capital of Japan.</p>
 +
</div>
 +
 +
<div id="Oslo" class="tabcontent">
 +
  <h1>Oslo</h1>
 +
  <p>Oslo is the capital of Norway.</p>
 +
</div>
  
 +
<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button>
 +
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button>
 +
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button>
 +
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button>
 +
</body>
 
</html>
 
</html>

Revision as of 12:32, 16 October 2018

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Oslo

Oslo is the capital of Norway.