MyFullStackMasterMindQuiz/index.html at main · genius-pending/MyFullStackMasterMindQuiz · 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
<!DOCTYPE html>
<html lang="en-us">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Javascript Mastermind Quiz</title>
  <embed src="assets/Mastermind - Theme Tune.mp3" autostart="true" loop="false" width="2" height="0">


  <!-- Boostrap Stylesheet -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <!-- My own CSS stylesheet -->
  <link rel="stylesheet" href="assets/style.css" media="screen">

</head>
<body>

        <p class='masthead-intro'>fullstack programming</p>
        <h1 class='masthead-heading'>Mastermind Quiz</h1>
        <div class="introduction">
           <p> a special breed of human has been born one who strives to harness the power of coding and change the world. <br>
                some of these great minds have gone on to become the richest most powerful people in the world! <br> It is no easy feat
                you must train your mind and master your craft, pass this trial on your journey to becoming a coding jedi master.
                <br>Rules:<br>There are 10 questions in total on HTML,CSS,and Javascript  <br>
                You must get all 10 right to become a coding mastermind  <br>You have 60 seconds, each time you get a question wrong the timer will decrease by 5 seconds <br>
                The quiz ends when the time elapses or you answer all 10 questions. <br>
                At the end of the quiz your score will be revealed  <br>good luck </p>
        </div>
          <button id="startquiz" class="btn">Start Quiz</button>


              <div class="container">
                 <div id="question-container" class="hide">
                    <div id="question">Question</div>
                    <div id="answer-buttons" class= "btn-grid">
                    <button class="btn" id="A">A</button>
                    <button class="btn" id="B">B</button>
                    <button class="btn" id="C">C</button>
                    <button class="btn" id="D">D</button>
                 </div>


                     <p id="timer" class="btn"></p>
                     <p id="answerfeedback"></p>

                 </div>
              </div>

              <div class="container">
               <div id="highscore-container" class="hide">
               <div class="row justify-content-center mt-5 pt-3 pb-3">
                   <div class="col-10 col-lg-8">
                    <h2>Game Over</h2>
                    <p id="scorebox">Score : </p>
                    <p>Enter your name below and view your score</p>

                       <p id="user-score"> </p>
                       <div>
                        <input type="text" id= "Name" placeholder="Enter Name" class="btn" >
                        </div>
                       <button class="btn" id="Try Again">Try Again</button>
                       <button class="btn" id="View Scores" type="submit">View Scores</button>
                       <form class="form-group">
                      </form>
                   </div>

               </div>
               <div>
                   <div id="list-scores" class="col-10 col-lg-8">

                   </div>
               </div>
            </div>
         </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="assets/questions.js"></script>
<script src="assets/script.js"></script>
</html>