quiz.html

<!DOCTYPE html>
<html>
  <head>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.2/firebase-database.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-analytics.js"></script>

  
<!-- link to fiebase script on repository -->
  <script src="scripts/firebase4.js"></script>
<!--End firbase copy and paste-->

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    <!--Script Library-->
    <script src="https://cdn.anychart.com/releases/8.0.0/js/anychart-base.min.js"></script>
    <title>Quiz</title>

  </head>
  <body>
    <!--For the top navigation bar-->
    <div class="topnav">
      <a href="index.html">Home</a>
      <a href="engage.html">Evolution?</a>
      <a href="metamorphosis.html">Growing up</a>
      <a href="family.html">Family Tree</a>
      <a href="geologictime.html">History</a>
      <a href="Alola.html">Alola</a>
      <a href="quiz.html"></a>
        </div>
  
    <!--Page content begins here-->
    <div class="header"><h1>Quiz</h1></div>
    <div class="layout">
      
      <!--Small title-->
      <h1>Quiz</h1>

    <!--Learning Objectives-->  
      <div id="paper">
        <div id="pattern">
          <div id="paperContent">
        
          <h2>Learning Objectives</h2>
            Students will review what they learned in this module.
        <br>
            </div>
        </div>
     </div>
    <!--End learning objectives-->
    
    <div class="photoBox">
      <img width="100%" src="images/alolaBanner.jpg" alt="Alola Region">
    </div>

    <p>In this module you learned about evolution in pokemon! Review your answers to previous questions below.</p>
    <!--Insert previous questions https://www.youtube.com/watch?v=NcewaPfFR6Y-->

    <!--Q1: Are children exactly the same as their parents? Q2: Does evolution happen to an individual or a population? Q3: Does evolution happen over a short or a long time? Q4: Identify the common ancestor + pictue-->
    <p>Enter name of user to get information</p>
    <input type="text" id="Name" required="required"><br>
    <button type="button" onclick="readFB();">Get</button><br>

    <p>You originally said <strong id="pretest3"></strong> was evolution because: <strong id="explain13"></strong><br>
    <br>You originally said children <strong id="childrenlooklikeparents3"></strong> look like their parents because: <strong id="explain23"></strong><br>
    <br>You predicted that would happen to traits over thousands of years: <strong id="explain33"></strong><br>
    <br>You said that evoluion happened over a <strong id="time13"></strong> period of time. <br>
    <br>You said that evolution happens to a <strong id="time23"></strong>.<br>
    <br>You said that Exeggutor's traits might help them live in a tropical environment because: <strong id="explain53"></strong>. <br>This is an example of natural selection.

</p>
<br><br>
<div class="boxed">
  <h1>Quiz</h1>
   <label>Does metamorphosis happen to an individual or a species?</label><br>
     <input type="radio" id="individualT" name="metamorphosisT" value="individualT">
      <label for="individualT">A. Individual</label><br>
     <input type="radio" id="speciesF" name="metamorphosisT" value="speciesF">
      <label for="speciesF">B. Species </label><br>

  <label>Does an individual inherit ALL of their traits from one parent?</label><br>
    <input type="radio" id="ALLF" name="inheritTraits" value="ALLF">
      <label for="ALLF">A. Yes</label><br>
    <input type="radio" id="someT" name="inheritTraits" value="someT">
      <label for="someT">B. No </label><br>
  
  <label>True or False: Natural selection is when traits which help an organism survive in thier environment aren't passed down to the next generation.</label><br>
    <input type="radio" id="T3" name="natrualSelectionF" value="T3">
      <label for="T3">A. True </label><br>
    <input type="radio" id="F3" name="natrualSelectionF" value="F3">
      <label for="F3">B. False </label><br>
  
  <label>Does evolution happen to an individual or a species?</label>
    <br><input type="radio" id="individualF" name="IorS" value="individualF">
      <label for="individualF">A. Individual</label><br>
    <input type="radio" id="speciesT" name="IorS" value="speciesT">
      <label for="speciesT">B. Species </label><br>
  
      <div><p id="checkQuiz1" onclick="checkQuiz()" style="background-color: yellow;">Check</p></div>
</div>

    <div class="photoBox">
        <img width="100%" src="images/metamorphosis1.png" alt="Beedrill family">
        <p style="outline-style: double;">A</p>
      </div>
  
      <div class="photoBox">
        <img src="images/dogFamily.png" alt="Dog family" width="100%" >
        <p style="outline-style: double;">B</p>
      </div>

      <div class="boxed">
    <p>So, based on what you learned, lets go back to the original question. Which one of these pictures represents evolution and why? </p>
    <!--Text box entry-->
    <br>
    <input type="radio" id="Awrong" name="postTest" value="Awrong">
    <label for="Awrong">A</label>
    <br><input type="radio" id="Bright" name="postTest" value="Bright">
    <label for="Bright">B</label><br><br>
        <textarea id="explain7" rows="4" cols="100" placeholder="I think A/B is evolution because..." style="width=100%"></textarea>

      <br>
      <button onclick="writeQuizData()">Submit</button>
      <button onclick="hint()">Hint</button>
    </div>
    
    <br><br>
    <div id="displayHint">Hint</div>

    <br><br>
    <div class="boxed" id="endResults">
      <h2>See how you did Compared to others (Click twice to see results)</h2><br>
      <button type="button" onclick="readResults();">Results</button><br>
      <p>
          <strong id="noneright"></strong> people got 0 questions right<br>
          <strong id="oneright"></strong> people got 1 question right<br>
          <strong id="tworight"></strong> people got 2 questions right<br>
          <strong id="threeright"></strong> people got 3 questions right<br>
          <strong id="fourright"></strong> people got 4 questions right<br>

          <!--<u id="improve"></u> improved on the pre- and post-test over the course of this module-->
      </p>

    </div>

  </div>
  </body>
  

    
</html>