-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
83 lines (83 loc) · 3.49 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Programming Quiz</title>
<link rel="stylesheet" href="Assets/styles.css">
</head>
<body>
<!-- Quiz Header -->
<header id="QuizHeader">Programming Quiz</header>
<!-- Quiz Container -->
<div class="container">
<!-- Start Quiz Button -->
<button id="StartQuizButton" class="btn" onClick="StartQuiz()">Start the Quiz</button>
<!-- Show High Score-->
<div id="ShowHighScore" class="hidden"></div>
<!-- Show Score Board -->
<div id="ShowScoreBoard" class="hidden">
Score Board: <br><ul id="ScoreBoard"></ul>
</div>
<!-- Fill In Blank Form -->
<div id="FillInBlankForm" class="hidden">
<h2 id="FillInQuestion"></h2>
<label for="FillInBlank">Answer:</label>
<input type="text" id="FillInBlank" onkeyup="this.value = this.value.toLowerCase();">
</div>
<!-- Multiple Choice Form -->
<div id="MultipleChoiceForm" class="hidden">
<h2 id="QuizQuestion"></h2>
<input type="radio" id="A" name="AnswerForm" value="A">
<label for="A" id="LA"></label><br>
<input type="radio" id="B" name="AnswerForm" value="B">
<label for="B" id="LB"></label><br>
<input type="radio" id="C" name="AnswerForm" value="C">
<label for="C" id="LC"></label><br>
<input type="radio" id="D" name="AnswerForm" value="D">
<label for="D" id="LD"></label><br>
</div>
<!-- Submit Answer Form -->
<div id="SubmitAnswerForm" class="hidden">
<button id="SubmitAnswerButton" class="btn">Submit Answer</button>
<!-- Timer -->
<div id="TimerDiv" class="TimerDiv">
<div id="Timer" class="Timer">15 seconds left to answer.</div>
<div id="ProgressBar" class="ProgressBar">
<div id="Progress" class="Progress"></div>
</div>
</div>
</div>
<br><br>
<!-- Clear High Score Button -->
<button id="ClearHighScoreBtn" class="hidden" onClick="ClearHighScore()">Clear All Scores</button>
<!-- Show Correct Answer -->
<div id="ShowCorrectAnswer" class="hidden"></div>
<!-- Next Question Button -->
<button id="NextQuestionButton" class="hidden" onclick="NextQuestion()">Next Question</button><br><br><br>
<!-- Cancel Quiz Button -->
<button id="CancelQuizButton" class="hidden" onClick="CancelQuiz()">Cancel Quiz</button>
<!-- End Quiz Button -->
<button id="EndQuizButton" class="hidden" onclick="EndQuiz()">End Quiz</button>
</div>
<footer id="QuizFooter">
<p>
<a class="footerli">© 2020 Vincent McGargill</a>
</p>
<p>
Email: <a class="footerli" href="mailto:vincentmcgargill@gmail.com">vincentmcgargill@gmail.com</a>
</p>
<p>
<a href="https://github.com/vmcgargill" class="footerli">GitHub</a>
</p>
<p>
<a href="https://www.linkedin.com/in/vincent-mcgargill-b6244660/" class="footerli">LinkedIn</a>
</p>
<p>
<a href="https://vmcgargill.github.io/portfolio/" class="footerli">GitHub Portfolio</a>
</p>
</footer>
<script src="questions.js"></script>
<script src="scripts.js"></script>
</body>
</html>