diff --git a/wiki/pages/education.html b/wiki/pages/education.html index 419424cef755ed0a5e06834cf09644a926298ccd..773c8ab5553b102921fa643310c7fdbd8e29f01e 100644 --- a/wiki/pages/education.html +++ b/wiki/pages/education.html @@ -1,35 +1,75 @@ {% extends "layout.html" %} -{% block title %}Education{% endblock %} -{% block lead %}Innovative educational tools and outreach activities have the ability to establish a two-way dialogue with new communities by discussing public values and the science behind synthetic biology.{% endblock %} +{% block title %}Project Description {% endblock %} +{% block lead %} {% endblock %} {% block page_content %} -<div class="row mt-4"> - <div class="col"> - <div class="bd-callout bd-callout-info"> - <h4>Best Education</h4> - <p>How have you developed new opportunities to include more people in shaping synthetic biology? Innovative educational tools and outreach activities have the ability to establish a two-way dialogue with new communities by discussing public values and the science behind synthetic biology. Document your approach and what was learned by everyone involved to compete for this award.</p> - <p>To compete for the Best Education prize, select the prize on the <a href="https://competition.igem.org/deliverables/judging-form">judging form</a> and describe your work on this page.</p> - <hr> - <p>Please see the <a href="https://competition.igem.org/judging/awards">2024 Awards Page</a> for more information.</p> - </div> +<div class="pagecontainer"> + <div class="title2"> + <span>Project Description</span> </div> -</div> + <div class="pagebody"> + <div class="pagenav"> + <div onclick="goTo(document.getElementById('one'))"><span id="subtitle1" style="color: #62D881;">Introduction</span></div> + <div onclick="goTo(document.getElementById('two'))"><span id="subtitle2" style="color: #62D881;">High School Lectures</span></div> + <div onclick="goTo(document.getElementById('three'))"><span id="subtitle3" style="color: #62D881;">Kinderboerderij Tanthof </span></div> + <div onclick="goTo(document.getElementById('four'))"><span id="subtitle4" style="color: #62D881;">Social Media</span></div> + <div onclick="goTo(document.getElementById('five'))"><span id="subtitle5" style="color: #62D881;">Outreach</span></div> + </div> + <div class="pagecontent"> + <!-- 1 --> + <div class="h" id="one"> + <div class="h1">Introduction</div> + </div> + <!-- 2 --> + <div class="h" id="two" style="margin-top: -100px"> + <div class="h1">High School Lectures</div> + </div> + <!-- 3 --> + <div class="h" id="three"> + <div class="h1">Inspiring Future Scientists at Kinderboerderij Tanthof</div> + </div> + <div class="h" id="four"> + <div class="h1">Learning Through Social Media</div> + + </div> + + <div class="h" id="five"> + <div class="h1">Outreach</div> + <div class="h2">SynBIONL</div> + <div class="h2">Dutch iGEM Meetup</div> + <div class="h2">OWee/IP</div> + </div> -<div class="row mt-4"> - <div class="col"> - <h2>Inspirations</h2> - <hr> - <ul> - <li><a href="https://2020.igem.org/Team:CCA_San_Diego/Education">2020 CCA San Diego</a></li> - <li><a href="https://2020.igem.org/Team:Lambert_GA/Education">2020 Lambert GA</a></li> - <li><a href="https://2020.igem.org/Team:Stanford/Education">2020 Stanford</a></li> - <li><a href="https://2020.igem.org/Team:Waseda/Education">2020 Waseda</a></li> - <li><a href="https://2020.igem.org/Team:Fudan/Education">2020 Fudan</a></li> - <li><a href="https://2020.igem.org/Team:Toulouse_INSA-UPS/Education">2020 Toulouse INSA UPS</a></li> - </ul> - </div> </div> +<script> + var TopDistance = 120; + let elements = [document.getElementById('one'), + document.getElementById('two'), + document.getElementById('three'), + document.getElementById('four'), + document.getElementById('five')]; + window.goTo = function(el){ + document.documentElement.scrollTop += el.getBoundingClientRect().top - TopDistance; + } + function Highlight(el, subtitle){ + if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){ + subtitle.style.color = "#62D881"; + } + else{ + subtitle.style.color = "#185A4F"; + } + } + function HighlightCheck(){ + Highlight(elements[0], document.getElementById('subtitle1')); + Highlight(elements[1], document.getElementById('subtitle2')); + Highlight(elements[2], document.getElementById('subtitle3')); + Highlight(elements[3], document.getElementById('subtitle4')); + Highlight(elements[4], document.getElementById('subtitle5')); + } + window.addEventListener("scroll", HighlightCheck); +</script> + {% endblock %}