Difference between revisions of "Team:NUS Singapore-A/InterLab"

(Prototype team page)
 
(added an accordion to the interlab section. Need to troubleshoot the +/- changes when the button is active)
Line 1: Line 1:
 
{{NUS_Singapore-A}}
 
{{NUS_Singapore-A}}
 
<html>
 
<html>
 +
<style>
 +
/***************************************************CSS STARTS HERE*********************************************************/
 +
.accordion {
 +
    background-color: #eee;
 +
    color: #444;
 +
    cursor: pointer;
 +
    padding: 18px;
 +
    width: 100%;
 +
    text-align: left;
 +
    border: none;
 +
    outline: none;
 +
    transition: 0.4s;
 +
}
  
 +
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 +
.active, .accordion:hover {
 +
    background-color: #ccc;
 +
}
 +
 +
/* Style the accordion panel. Note: hidden by default */
 +
.panel {
 +
    padding: 0 18px;
 +
    background-color: white;
 +
    max-height: 0;
 +
    overflow: hidden;
 +
    transition: max-height 0.2s ease-out;
 +
}
 +
.accordion:after {
 +
    content: '+';
 +
    font-size: 13px;
 +
    color: #777;
 +
    float: right;
 +
    margin-left: 5px;
 +
}
 +
 +
.active:after {
 +
    content: "-" !important;
 +
}
 +
 +
 +
 +
 +
/***************************************************CSS ENDS HERE**********************************************************/
 +
</style>
 +
 +
 +
<div>
 +
 +
<div>
 +
<h1>Interlab Study</h1>
 +
</div>
 +
 +
<div>
 +
<h2>Objectives</h2>
 +
<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>
 +
</div>
 +
 +
<div>
 +
<div>
 +
<h2>Methods</h2>
 +
</div>
 +
 +
<button class="accordion">Section 1</button>
 +
<div class="panel">
 +
  <p>blah blah blah blah</p>
 +
</div>
 +
 +
<button class="accordion">Section 2</button>
 +
<div class="panel">
 +
  <p>blah blah blah blah</p>
 +
</div>
 +
 +
<button class="accordion">Section 3</button>
 +
<div class="panel">
 +
  <p>blah blah blah blah</p>
 +
</div>
 +
</div>
 +
 +
 +
<div>
 +
 +
<div>
 +
<h2>Results</h2>
 +
</div>
 +
 +
<button class="accordion">Plate Reader and CFU Protocol</button>
 +
<div class="panel">
 +
  <p>blah blah blah blah</p>
 +
  <h4>BIG HEADER BLAH</h4>
 +
  <ol>
 +
    <li>Number 1<ul>
 +
      <li>blah blah 1</li>
 +
      <li>blah blah 2</li>
 +
      <li>blah blah 3</li>
 +
      <li>blah blah 4</li>
 +
      <li>blah blah 5</li>
 +
      <li>blah blah 6</li>
 +
    </ul></li>
 +
 +
    <li>Number 2<ul>
 +
      <li>blah blah 1</li>
 +
      <li>blah blah 2</li>
 +
      <li>blah blah 3</li>
 +
      <li>blah blah 4</li>
 +
      <li>blah blah 5</li>
 +
      <li>blah blah 6</li>
 +
    </ul></li>
 +
  </ol>
 +
</div>
 +
 +
<button class="accordion">Flow Cytometry Protocol</button>
 +
<div class="panel">
 +
  <p>blah blah blah blah</p>
 +
  <h4>BIG HEADER BLAH</h4>
 +
  <ol>
 +
    <li>Number 1<ul>
 +
      <li>blah blah 1</li>
 +
      <li>blah blah 2</li>
 +
      <li>blah blah 3</li>
 +
      <li>blah blah 4</li>
 +
      <li>blah blah 5</li>
 +
      <li>blah blah 6</li>
 +
    </ul></li>
 +
 +
    <li>Number 2<ul>
 +
      <li>blah blah 1</li>
 +
      <li>blah blah 2</li>
 +
      <li>blah blah 3</li>
 +
      <li>blah blah 4</li>
 +
      <li>blah blah 5</li>
 +
      <li>blah blah 6</li>
 +
    </ul></li>
 +
  </ol>
 +
</div>
 +
 +
<button class="accordion">Section 3</button>
 +
<div class="panel">
 +
  <p>blah blah blah blah</p>
 +
</div>
 +
 +
</div>
 +
 +
 +
<div>
 +
<h2>Discussion</h2>
 +
</div>
 +
 +
<div>
 +
<h2>Conclusion</h2>
 +
</div>
 +
 +
</div>
  
 
<div class="column full_size judges-will-not-evaluate">
 
<div class="column full_size judges-will-not-evaluate">
Line 22: Line 173:
 
</p>
 
</p>
 
</div>
 
</div>
 +
 +
 +
 +
<script>
 +
/***************************************************JAVASCRIPT STARTS HERE**************************************************/
 +
 +
 +
 +
 +
var acc = document.getElementsByClassName("accordion");
 +
var i;
 +
 +
for (i = 0; i < acc.length; i++) {
 +
    acc[i].addEventListener("click", function() {
 +
 +
        /* Toggle between adding and removing the "active" class,
 +
        to highlight the button that controls the panel */
 +
 +
        this.classList.toggle("active");
 +
 +
        /* Toggle between hiding and showing the active panel */
 +
 +
        var panel = this.nextElementSibling;
 +
        if (panel.style.display === "block") {
 +
            panel.style.display = "none";
 +
        } else {
 +
            panel.style.display = "block";
 +
        }
 +
    });
 +
}
 +
 +
for (i = 0; i < acc.length; i++) {
 +
  acc[i].addEventListener("click", function() {
 +
    this.classList.toggle("active");
 +
    var panel = this.nextElementSibling;
 +
    if (panel.style.maxHeight){
 +
      panel.style.maxHeight = null;
 +
    } else {
 +
      panel.style.maxHeight = panel.scrollHeight + "px";
 +
    }
 +
  });
 +
}
 +
 +
 +
 +
 +
  
  
  
  
 +
/***************************************************JAVASCRIPT ENDS HERE****************************************************/
 +
</script>
  
  
  
 
</html>
 
</html>

Revision as of 17:24, 8 June 2018

CONNECT WITH US

Interlab Study

Objectives

blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

Methods

blah blah blah blah

blah blah blah blah

blah blah blah blah

Results

blah blah blah blah

BIG HEADER BLAH

  1. Number 1
    • blah blah 1
    • blah blah 2
    • blah blah 3
    • blah blah 4
    • blah blah 5
    • blah blah 6
  2. Number 2
    • blah blah 1
    • blah blah 2
    • blah blah 3
    • blah blah 4
    • blah blah 5
    • blah blah 6

blah blah blah blah

BIG HEADER BLAH

  1. Number 1
    • blah blah 1
    • blah blah 2
    • blah blah 3
    • blah blah 4
    • blah blah 5
    • blah blah 6
  2. Number 2
    • blah blah 1
    • blah blah 2
    • blah blah 3
    • blah blah 4
    • blah blah 5
    • blah blah 6

blah blah blah blah

Discussion

Conclusion

★ ALERT!

This page is used by the judges to evaluate your team for the medal criterion or award listed below.

Delete this box in order to be evaluated for this medal criterion and/or award. See more information at Instructions for Pages for awards.

InterLab

Bronze Medal Criterion #4

Standard Tracks: Participate in the Interlab Measurement Study and/or obtain new, high quality experimental characterization data for an existing BioBrick Part or Device and enter this information on that part's Main Page in the Registry. The part that you are characterizing must NOT be from a 2018 part number range.

For teams participating in the InterLab study, all work must be shown on this page.