diff --git a/static/css/education.css b/static/css/education.css
index fe6751561e669028cc5e0385e3b0019b34852cdb..3122901437779c5221196cf8e1a7a65403dceeb4 100644
--- a/static/css/education.css
+++ b/static/css/education.css
@@ -7,6 +7,7 @@
#NLO_animation_container {
padding: 8vw;
padding-top: 0;
+ padding-bottom: 0;
}
#all_NLO_container {
@@ -63,3 +64,49 @@
transition: all 0.3s ease;
opacity: 1;
}
+
+#headers-container {
+ position: absolute;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+
+ padding-left: 7.5%;
+ padding-right: 7.5%;
+}
+
+#header-partnership-row {
+ display: flex;
+ justify-content: flex-start;
+}
+
+#header-mentorship-row {
+ display: flex;
+ justify-content: flex-end;
+ flex-direction: column;
+ flex-wrap: wrap;
+ color: white;
+ align-items: flex-end;
+}
+
+#header-partnership,
+#header-mentorship {
+ line-height: 4.5vw;
+ font-size: 4.5vw;
+ font-weight: bold;
+ cursor: pointer;
+ color: white;
+ transition: all 0.3s ease;
+}
+
+.inactive-header:hover {
+ color: #dbd8b9 !important;
+}
+
+.inactive-header {
+ color: #4c4c4c !important;
+}
+
+#games-section {
+ display: none;
+}
diff --git a/static/scripts/utils.js b/static/scripts/utils.js
index f4e64338333f175554cccece71d3b5df77dacbd7..63db7598d6d9c2ba36f7d765fc3855170196217e 100644
--- a/static/scripts/utils.js
+++ b/static/scripts/utils.js
@@ -215,6 +215,41 @@ function animateWithScroll(selector,upperBound,lowerBound) {
}
+
+function animateAfterScroll(selector,upperBound,lowerBound) {
+ const toAnimate = document.querySelectorAll(selector);
+ const animate = (el) => {
+ const boundRect = el.getBoundingClientRect();
+ const clientY = boundRect?.y;
+
+ const lottie = el.getLottie();
+ const persentage = lottie.currentFrame / lottie.totalFrames;
+ const delay = 100;
+ if (clientY < window.innerHeight * upperBound && clientY > window.innerHeight * lowerBound) {
+ const progress = (1 - (clientY / window.innerHeight - lowerBound) / (upperBound - lowerBound));
+ const diff = progress - persentage;
+ // for (let i = 1; i <= 10; i++) {
+ // setTimeout(() => {
+ // el.seek(`${Math.floor((persentage + diff / i) * 100)}%`)
+
+ // },delay)
+ // }
+ el.play();
+
+ }
+
+
+ }
+ toAnimate.forEach(el => {
+ animate(el);
+ document.addEventListener('scroll',() => {
+ animate(el);
+ });
+
+ });
+
+}
+
function rotateGradient(selector,color1,color2,speed = 1) {
const item = document.getElementById(selector);
let deg = 90;
diff --git a/wiki/pages/education.html b/wiki/pages/education.html
index 4c84eb8a2a99f2b3ed639064b8681110c0a9f666..619491a015cd37c0c37ccfc2a4f4d283a1042ca3 100644
--- a/wiki/pages/education.html
+++ b/wiki/pages/education.html
@@ -10,24 +10,8 @@ with new communities by discussing public values and the science behind syntheti
<link href="{{ url_for('static', filename = 'css/education.css') }}" rel="stylesheet">
-<section class="min-vh-100 width-12">
- <div id="NLO_animation_container">
- <div id="all_NLO_container">
- <div class="position-absolute width-12" id="NLO_svg">
- {%include 'custom-svgs/NLO.html'%}
- </div>
- <lottie-player id="main-NLO-animation" src="https://static.igem.wiki/teams/4440/wiki/education/education.json"
- autoplay>
- ">
- </lottie-player>
- </div>
-
- </div>
- <!-- {% include 'custom-svgs/NLO.html' %} -->
-</section>
-
<section class="page_heading mt-5 mb-0">
<div class="container">
<div class="d-flex row align-content-center justify-content-center">
@@ -35,143 +19,361 @@ with new communities by discussing public values and the science behind syntheti
Education
</div>
<hr class="hr-divider width-2 fade_from_top">
- <p class="section-text text-center">
- Humans are learning new things every day, adjusting to external stimuli and constantly monitoring the
- environment. These
- learning mechanisms are crucial for our survival. However, many children and adults find themself bored during
- traditional teaching classes.
+ <p class="section-text text-center fade_from_left">
+ The Estonia_TUIT iGEM team always sets a high goal to include a maximum number of people in synthetic biology
+ and
+ life-sciences in general and educate diverse groups using different teaching methods. We believe that by
+ including more
+ people into evidence-based science, we provide a key to a more prosperous society, therefore making the world a
+ better
+ place. Moreover, our team itself represents a good example of our teaching philosophy. We aim to include,
+ inspire,
+ motivate, create feelings of belonging, engage multiple senses, and provide equal opportunities to the maximum
+ number of
+ people.
+
+
+ </p>
+
+ <p class="section-text text-center fade_from_right">
Our team dedicates a lot of time and effort to shift the learning paradigm and make the learning process
interactive.
When designing workshops our team always considers the target group, their needs and expectations, and how we
could make
- our class engage in the planned activity and promote active participation.
+ participants engage in the planned activity.
+
+ </p>
+ <p class="section-text text-center fade_from_left">
We follow the learning spirale: engage - create a positive atmosphere - motivate and support - provide
constructive
feedback - raise to the next level.
+
+ </p>
+
+ <p class="section-text text-centerfade_from_right">
When following these psychological tips, students will feel the appreciation of their efforts, stimulating more
proactive behavior, which in turn leads to independent studying - hence better learning outcomes.
+
+
+ </p>
+
+ <p class="section-text text-center fade_from_left">
More importantly, we never limit our workshops to only a couple of senses. During the workshops participants
interact
with the subject they study -they look, smell, touch, listen.
- We hope our team’s example will inspire others to incorporate interactive learning into their projects. But
- remember,
- interactive doesn’t always mean fun, but it always means interesting.
</p>
- <div class="arc-divider">
+
+ <p class="section-text text-center fade_from_right">
+ We hope our team’s example will inspire others to incorporate interactive learning into their projects.
+
+
+ </p>
+
+ </div>
+ </div>
+</section>
+
+<section class="width-12">
+ <div id="NLO_animation_container">
+ <div id="all_NLO_container">
+ <div class="position-absolute width-12" id="NLO_svg">
+ </div>
+ <lottie-player id="main-NLO-animation"
+ src="https://static.igem.wiki/teams/4440/wiki/json-animations/education-senses.json">
+ ">
+ </lottie-player>
+
+
+ </div>
+
+ </div>
+ <!-- {% include 'custom-svgs/NLO.html' %} -->
+</section>
+
+<section class="mb-0">
+ <div class="container">
+ <div class="d-flex row align-content-center justify-content-center">
+ <div class="fade_from_top ts-30 bold color-transparent bg-transparent text-center mb-5 " id="super_quote">
+ “What I hear, I forget; what I see, I remember; what I do, I understand†- Chinese proverb.
+ </div>
+ </div>
+ </div>
+</section>
+
+<section class="position-relative" style="height: 15vw;">
+ <div id="headers-container">
+ <div id="header-partnership-row" class="fade_from_left">
+ <div id="header-partnership">
+ TEACHING PHILOSOPHY
+ </div>
+ </div>
+ <div id="header-mentorship-row" class="fade_from_right">
+ <div id="header-mentorship" class="inactive-header">
+ INTERACTIVE ONLINE GAMES
+ </div>
+ <span style="color:white">CLICK TO PLAY</span>
+
+ </div>
+ </div>
+</section>
+
+<section class="mb-0" id="philosophy_section">
+ <div class="container">
+ <div class="d-flex row align-content-center justify-content-center">
+
+
+
+
+
+
+ <p class="section-text text-justify fade_from_right">
+ <b> Traditional teaching techniques</b> focus mainly on two senses: hearing and eyesight, hence, limiting the
+ interaction
+ interface with the study subject. This lowers the learning outcome. Moreover, passive learning usually tends to
+ make
+ even the most interesting topics boring and contributes mainly to the development of the memorisation skills.
+ Overall,
+ this classical teaching paradigm <b> leaves students less prepared for their future career</b>, and provides
+ only a few
+ transferable skills.
+
+
+
+ </p>
+
+ <p class="section-text text-justify fade_from_left">
+ <b>Evidence-based learning</b>, on the other hand, incorporates active teaching methods that drastically
+ improves learning
+ experience. Active methods of learning include using different ways of receiving new information, interactions
+ of
+ students with the subject of study (e.g. practical workshops), active engagement in the social life of the
+ studying
+ group, and the opportunity to incorporate newly acquired knowledge in practice.
+
+
+ </p>
+ <p class="section-text text-start ts-20 bold fade_from_right">
+ Senses
+ </p>
+
+ <p class="section-text text-justify fade_from_left">
+ <b> All sensory mechanisms</b> contribute to the efficient study process, since all of them evolved to help
+ humans adapt to the
+ environment and survive. Therefore, using them in combination provides more wholesome studying experience.
+
+
+ </p>
+ <p class="section-text text-start ts-20 bold fade_from_right">
+ Emotions
+ </p>
+ <p class="section-text text-justify fade_from_left">
+ <b> Incorporation of emotions</b> plays an important role in the efficient study process. When students receive,
+ for example,
+ positive emotion from the studying process, it raises their motivation, hence speeding up the study process, and
+ vice
+ versa, when studying associates with the negative feelings, students tend to avoid it.
+
+
+
+ </p>
+ <p class="section-text text-start ts-20 bold fade_from_left">
+ Inspiration/Motivation
+ </p>
+ <p class="section-text text-justify">
+ <b>Inspiration and motivation</b> If students <b>are inspired</b>by the topic they study, and by the teacher
+ they study from, it
+ leads to increased level of performance and encourages student’s independent learning.
+
+
+ </p>
+ <p class="section-text text-start ts-20 bold fade_from_right">
+ Study environment (Feeling of community)
+ </p>
+ <p class="section-text text-justify">
+ It is very important to create an inclusive and supportive environment in the study community. When students<b>
+ feel that
+ they belong</b>, they want to participate in the study activities more than if they feel isolated.
+
+
+ </p>
+
+ <p class="section-text text-justify fade_from_left">
+ All these study methods when <b>combined together lead to exponential growth of learning experience</b>, provide
+ students with
+ the necessary skills, and <b>prepare them for future challenges.</b>
+
+
+ </p>
+
+ <p class="section-text text-start bold mb-2 fade_from_right">
+ Estonia_TUIT Teaching Philosophy Statement
+ </p>
+ <div class="width-10">
<img src="https://static.igem.wiki/teams/4440/wiki/wiki/half-arc-divider.svg"
class="img-fluid fade_from_bottom">
</div>
+
+
+ <p class="section-text text-start ts-20 bold mb-3 text-decoration-underline fade_from_left">
+ Estonia TUIT follows the evidence-based learning principle when designing educational events and materials.
+ </p>
+ <p class="section-text text-start ts-20 bold">
+ Physical interaction
+
+ </p>
+ <p class="section-text text-justify fade_from_left">
+ <b>We encourage physical interaction of participants with the subject of the study</b>, like during DNA
+ extraction
+ workshop you need to first crush the kiwi to release cells, then mix it with soap and salt to break the member,
+ filter,
+ precipitate and look at the DNA. And even though this process reminds you of cooking, <b>it teaches you a
+ lot</b>: the
+ composition of the cell membrane and how soap breaks it, why we need to add salt to the solution and what
+ happens if we
+ forget, or why addition of ethanol precipitates DNA.
+
+
+ </p>
+
+
+ <p class="section-text text-start ts-20 bold fade_from_right">
+ Physical interaction
+
+ </p>
+ <p class="section-text text-justify fade_from_left">
+ <b>We encourage physical interaction of participants with the subject of the study</b>, like during DNA
+ extraction
+ workshop you need to first crush the kiwi to release cells, then mix it with soap and salt to break the member,
+ filter,
+ precipitate and look at the DNA. And even though this process reminds you of cooking, <b>it teaches you a
+ lot</b>: the
+ composition of the cell membrane and how soap breaks it, why we need to add salt to the solution and what
+ happens if
+ we
+ forget, or why addition of ethanol precipitates DNA.
+
+
+ </p>
+
+ <p class="section-text text-start ts-20 bold fade_from_right">
+ Emotions and Excitement
+
+ </p>
+ <p class="section-text text-justify fade_from_left">
+ <b>We create positive emotions and excitement</b>. Since we are all very excited about what we do, we inspire by
+ example
+ and demonstrate that synthetic biology can be fun! This raises the interest of the participants to the subject
+ of study
+ and sufficiently increases the learning outcomes, since it is a well-known concept that we learn better things
+ we are
+ interested in or care about!
+
+ </p>
+
+ <p class="section-text text-start ts-20 bold fade_from_right">
+ Accessible at home
+
+ </p>
+ <p class="section-text text-justify fade_from_left">
+ <b>We ensure that workshop participants get the opportunity to continue doing experiments at home</b> as we
+ provide our
+ protocols to the participants. Moreover, most of our workshops could be repeated at home with the components
+ that could
+ be easily found in the department store. To engage even more people in our workshops, we publish them on our
+ wiki for
+ other teams to use. Moreover, we have translated protocols to 9 languages to enable other teams to use them in
+ local
+ communities.
+
+ </p>
+
+ <p class="section-text text-start ts-20 bold fade_from_right">
+ Target different ages
+
+
+ </p>
+ <p class="section-text text-justify fade_from_left">
+ <b>Our workshops are meant for any age group or level of education</b>. We do not believe in “One size fits allâ€
+ philosophy and adjust our workshops for the target audience. Children up to 10 years old are usually more
+ interested in
+ the visual and sensory experience, and every time are very excited when we ask them to smash kiwi for our DNA
+ extraction
+ workshop. For high-schoolers we provide extensive instructions to explain the mechanism on why soap is used to
+ break the
+ cell membranes or what happens if we forget to add salt. Therefore, <b>different groups of people come out from
+ the
+ workshop with slightly different outcomes</b>.
+
+
+ </p>
+
+
+ <p class="section-text text-start ts-20 bold mt-5 text-decoration-underline fade_from_right">
+ Implementation of our teaching philosophy on ourselves
+
+ </p>
+ <p class="section-text text-start ts-20 bold fade_from_left">
+ Our Team as an Example of Our Teaching Philosophy
+
+ </p>
+ <p class="section-text text-justify fade_from_left">
+ “Preach what you teachâ€
+ iGEM is a course in the Science & Technology curriculum at the University of Tartu. So the team members study
+ hard to
+ succeed. We do not only teach others using evidence-based learning methods but also incorporate Estonia_TUIT
+ teaching
+ philosophy into our iGEM experience.
+
+
+
+ </p>
+
+ <p class="section-text text-justify fade_from_right">
+ We are very diverse, coming from <b>9 different countries</b>. We create a <b>good atmosphere</b> in our team
+ where
+ everyone feels they belong. This <b>feeling of belonging</b> stimulates more active participation. We are
+ emotionally
+ involved in the project, caring about its success. <b>We support each other</b> all the way through the iGEM
+ season. We
+ learn to solve problems from the moment we search for the project idea, to the moment we need to improvise a new
+ DNA
+ source for our DNA extraction workshop (it was a grass) or during wiki freeze we all interchange roles, and
+ could
+ <b>help the team succeed</b>.
+
+
+
+
+ </p>
+
</div>
</div>
</section>
+
+
+
<script>
- rotateGradient('education_title', '#9071f1', '#e2b025');
- // create simple HTML modal
- const text1 = ` <h1> Summer School SMTB </h1>
- <p class="section-text">
- Estonia_TUIT iGEM team hosted the School of Molecular and Theoretical Biology (SMTB)
- in the Institute of Technology. The school is based on a belief that students of high
- school age are ready to participate in laboratory work and be a part of actual scientific
- research. Under the mentorship of experts, the students worked in university labs on
- unsolved scientific problems. Experienced members of Estonia_TUIT iGEM team participated
- in the SMTB as teaching assistants and actively helped in conducting laboratory work and
- supervising high school students
- </p>
-<h1> Summer School by Estonia_TUIT</h1>
-<p class="section-text">
- The summer school offered an overview of synthetic biology achievements and applications.
- Students gained practical experience in molecular cloning and genetic engineering and made
- visits to the University of Tartu research facilities, such as the main laboratories of the
- Estonia_TUIT iGEM team. All practical courses were held in the form of hands-on workshops under
- the supervision of our iGEM Estonia_TUIT students and qualified personnel.
- </p>
- `;
-
- const nlo_summer = document.getElementById('NLO-summer-schools-inner');
- nlo_summer.addEventListener('click', () => {
- createSimpleHTMLModal('Summer School', text1);
- });
-
-
- const text_lectures = ` <h1> Lectures </h1>
- <p class="section-text">
- During various academic events, the classical lecture is a good method for educating public about complicated topics that are sometimes difficult to study independently. On numerous instances we try to improve dull atmosphere with fun games and entertaining methods for educating participants. We follow the learning spiral: engage - create a positive atmosphere - motivate and support - provide constructive feedback - raise to the next level.
- </p>`;
-
- const lectures = document.getElementById('NLO-lectures-inner');
- lectures.addEventListener('click', () => {
- createSimpleHTMLModal('Lectures', text_lectures);
- });
-
-
- const text_infos = `<h1>Info Sessions</h1>
-<p class="section-text">
-Info sessions that our Estonia_TUIT team holds in various events and
-educational fairs are one of our approaches for educating the public about synthetic
- biology, iGEM competition, and our projects. We organize info sessions and lectures
- in Estonia and other countries. Occasionally, we also conduct hands-on experiments
- during info sessions to make them more interactive and exciting to the audience. This
- iGEM season, we went to educational fairs in Latvia, Azerbaijan, and Georgia. Also, our
- team took part in multiple online info sessions. Educational info sessions are one of
- the most useful platforms to strengthen connections and find new nodes for the scientific network.
- </p>`;
-
- const infos = document.getElementById('NLO-info-sessions-inner');
- infos.addEventListener('click', () => {
- createSimpleHTMLModal('Info Sessions', text_infos);
- });
-
-
- const text_games = `<h1> Games </h1>
-<p class="section-text">
-Modern tendencies suggest that teaching through entertaining activities simplify the complicated process of acquiring new information that is often hard to interpret. Our team decided to employ this method in our work as independent activities and as part of other methods as well. In both of the aforementioned cases the feedback from public confirmed our expectations of success. Here we will provide few examples of games with interface adapted for interactions with page users
- </p
- <h1> Comic book </h1>
- <p class="section-text">
- To make learning easy and entertaining for children, we created a science related comic book describing our project. We also translated our comics to Ukrainian which was the memorable part of the Ukrainian Education Day. Children not only got acquainted with science, especially synthetic biology, but also realized that learning can also be fun.
- </p>
-
- <h1> Kahoot quiz </h1>
- <p class="section-text">
-Our Kahoot! quiz was loved by many of our guests in the event “Scientific Art Exhibition and Escape Roomâ€. So we decided to make a modified version for our online audience. Are you up for some fun and competition? Our team got you! Bring up your friends and enjoy solving our interactive science related quiz!
- </p>
- <h1> Public Quiz </h1>
- <p class="section-text">
-This year we made a public quiz in order to understand the perception of various people from different backgrounds, ages and education levels about science, synthetic biology and our project. We wanted to make a quiz not only informative but also fun. We shared the questions with our participants. After they answered, correct answers were marked with a green, and further explanations were given below every question to make it more useful and informative.
-</p>
-<a href="https://forms.gle/LEtDecSMv3iMbgrJ7"> FORM </a>
-
- <h1> Word game</h1>
- <p class="section-text">
-Are you a big fan of puzzles? This year we created a biology-related puzzle inspired by DNA complementarity. But don’t be afraid, the logic is simple: Adenine matches with Thymine, and Guanine with Cytosine. Start trying now and see if you can find the secret words!
-</p>
-<h1>Escape room</h1>
-<p class="section-text">
-We all dreamed of being a part of a science-fiction movie at least once, right? This time our team gives you the chance! Imagine you are on Mars. You see an exhausted astronaut coming back from the crater exploration duty just to find everybody at the station mysteriously disappeared. But what happened? There are some clues that can help figuring out what is going on. Can you help the astronaut to find out what happened?
-Do you want to learn more about the storyline and try to solve mysteries? You can start right now!
-</p>
-`;
-
- const games = document.getElementById('NLO-games-inner');
- games.addEventListener('click', () => {
- createSimpleHTMLModal('Games', text_games);
- });
-
-
-
-
- setTimeout(() => {
- const animElement = document.getElementById('main-NLO-animation');
- const svgElelment = document.getElementById('NLO_svg');
- animElement.style.opacity = 0;
- setTimeout(() => {
- animElement.style.display = 'none';
- }, 400);
- svgElelment.style.opacity = 1;
-
- }, 4500)
+
+
+
+
+ rotateGradient('education_title','#9071f1','#e2b025');
+ rotateGradient('super_quote','#9071f1','#e2b025');
+
+
+ const anim = document.getElementById('main-NLO-animation');
+
+
+ animateAfterScroll("#main-NLO-animation",0.5,-0.4)
+
+ window.addEventListener('scroll',() => {
+
+
+
+ })
+
</script>
{% endblock %}
\ No newline at end of file