code-quiz/index.html at master · JessMoran/code-quiz · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/9e5ac04d15.js" crossorigin="anonymous"></script>
  <meta charset="UTF-8">
  <title>Code Quiz</title>
</head>
<body>
<nav class="row-span-1 bg-indigo-900 py-8">
  <div class="grid md:grid-cols-2 lg:grid-cols-5">
    <div class="lg:col-start-3 text-center">
      <h1 class="text-2xl text-indigo-100">Coding Quiz Challenge</h1>
    </div> <!-- col-start-3 -->
    <!-- Timer container -->
    <div
      class="lg:col-start-5 p-2 bg-indigo-800 items-center leading-none rounded-full flex lg:inline-flex lg:w-1/2 mx-auto text-center"
      role="alert">
      <span class="font-semibold text-indigo-100 mx-2 text-left">Time left</span>
      <span id="seconds"
            class="flex text-indigo-100 rounded-full bg-indigo-500 px-2 py-1 ml-2 text-xs font-bold">60</span>
    </div>  <!-- Timer container ends -->
  </div> <!-- .grid -->
</nav>
<section class="grid grid-flow-col sm:grid-col-1 lg:grid-cols-3 mt-20">
  <div class="col-start-2 lg:text-center ml-4">
    <p id="title" class="text-indigo-500 text-3xl">Java Script Quiz</p>
  </div> <!-- .col-start-2 -->
  <div id="questionsCont" class="col-start-2 text-center"> <!-- Questions section  -->
    <p id="qnTag" class="mt-10 mb-5 mx-3">Try to answer the following code-related questions within the time. Keep in mind that
      incorrect answers will penalize your score time by ten seconds.</p>
  </div> <!-- .col-start-2 -->
  <div class="col-start-2 text-center">
    <div id="optionsCont" class="lg:p-3"></div> <!-- Answers  section  -->
  </div> <!-- .col-start-2 -->
  <div class="col-start-2 lg:text-center">
    <div id="highscoreCont"> </div> <!-- Highscore  section  -->
    <div id="highscoreBtns" class="mt-4"></div>
  </div> <!-- .col-start-2 -->
  <div class="col-start-2 text-center">
    <div id="validationCont"></div><!-- Wrong or Correct answers section  -->
  </div> <!-- .col-start-2 -->
  <div id="submitCont" class="col-start-2 text-center"><!-- Buttons section  -->
    <button id="startBtn"
            class="focus:outline-none bg-transparent hover:bg-indigo-800 text-indigo-700 font-semibold hover:text-white py-2 px-4 border border-indigo-500 hover:border-transparent rounded-full block mx-auto">
      Start Quiz
    </button>
  </div> <!-- .col-start-2 -->
</section>
<!-- Script links -->
<script src="script.js"></script>
</body>
</html>