TOL_PJ3/index.html at master · yu-zhao-xyz/TOL_PJ3 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>


  <title>Learner Sourcing</title>

  <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,500,600,700&display=swap" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">

  <link rel='stylesheet' href='css/style.css'>

</head>

<body>

  <!--Welcome Screen-->
  <div class='changing_frame' id = 'welcome'>
    <div class='title-mid'>
      <h1>Learner Sourced Quiz</h1>
      <p>Please do the following questions</p>
    </div>

    <div class='flex_parent margin_top_34'>
      <button onclick='to_q1()' class='main-btn'><span>Next</span></button>
    </div>

  </div>

  <!--Welcome Screen-->
  <div class='changing_frame' id = 'completed' style='display: none;'>
    <div class='title-mid'>
      <h1>Good Job!</h1>
    </div>
  </div>

  <!--Q1-->
  <div class='changing_frame' id = 'first_quiz' style='display: none;'>
    <h1 id = 'question_number'> Question 1 </h1>

    <div class='quiz margin_top_34'>
    <!--first question-->
    <div class="first_quiz">
      <h3 id="question">Sample question title</h3>
        <div class="p2">
          <input type='checkbox' id='first_quiz_A' name="first_quiz"><span id='quiz_A'> A. Option A Placeholder</span></button></br>
          <input type='checkbox' id='first_quiz_B' name="first_quiz"><span id='quiz_B'> B. Option B Placeholder</span></button></br>
          <input type='checkbox' id='first_quiz_C' name="first_quiz"><span id='quiz_C'> C. Option C Placeholder</span></button></br>
          <input type='checkbox' id='first_quiz_D' name="first_quiz"><span id='quiz_D'> D. Option D Placeholder</span></button></br>
        </div>

        <div id="first_correct_fb" style='display: none;'>
          <div class='flex_parent_column margin_top_16'>
            <div class = 'center_children_div fb_correct margin_top_16'>
              <div class='flex_left_align'><img class = 'sm_icon' src="images/check_circle_24px_rounded.png"><h3 class="margin-left-5">Correct!</h3></div>
              <div id='correctfeedback' class="p2 margin-left-30"><p>This is a sample correct feedback</p></div>
            </div>
          </div>
        </div>

        <div id="first_incorrect_fb" style='display: none;'>
          <div class='flex_parent_column margin_op_16'>
            <div class = 'center_children_div fb_incorrect margin_top_16'>
              <div class='flex_left_align'><img class = 'sm_icon' src="images/cancel_24px_rounded.png"><h3 class="margin-left-5">Incorrect!</h3></div>
              <div id='incorrectfeedback' class="p2 margin-left-30"><p>This is a sample incorrect feedback.</p></div>
            </div>
        </div>
      </div>

    </div>


    <div class='flex_parent margin_top_34'>
      <button id='submit' onclick='check_first_quiz_answer(); quiz_submit();' class='main-btn'><span>Submit</span></button>

      <button id = 'next' onclick='next_question()' style='display: none;' class='main-btn'><span>Next</span></button>

      <button id = 'retry_1' style='display: none;' onclick='retry()' class='text-btn'><span>Try Again</span></button>

    </div>

    <!-- <div class='flex_parent margin_top_34' id = 'next'> -->

    </div>

  </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src='js/jquery.csv.js'></script>
<script src = 'js/main.js'></script>
</body>

<footer>
</footer>