-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
90 lines (86 loc) · 4.38 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
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shashi's Interactive Quiz</title>
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="row">
<div id="introContainer" class="col-6 col-m-12 col-s-12 introContainer">
<div id="title" align="center"><h2>Welcome to Audio Orbis</h1></div>
<div id="introBox" class="col-12 col-m-12 col-s-12"></div>
<div id="startButtonContainer" class="col-12 col-m-12 col-s-12" >
<button id="startButton" class="start-btn" onclick="startQuiz();">Start Quiz</button>
</div>
</div>
</div>
<div class="row" id="page">
<div id="quizContainer" class=" col-12 col-m-12 col-s-12 quizContainer"><!-- The outer box that contains the quiz-->
<div id="title" align="center"><h2>The Never Ending Quiz </h2></div>
<div class="row">
<div id="questionContainer" class="col-12 col-m-12 col-s-12"><!--The box where question, hints and choices appear-->
<div class="row" id="questionBox">
<div id="question" class="col-12 col-m-12 col-s-12 question"></div>
<div id="questionImage" class="col-4 col-m-6 col-s-6 questionImage2"></div>
</div><link rel="shortcut icon" href=".ico">
<div class="row" id="answerOptionBox">
<div id="answerOptions" class="col-12 col-m-12 col-s-12"></div>
</div>
<!--<div class="row"><div id="hintBox" class="col-12 col-m-12 col-s-12"></div></div>-->
<div class="row" id="hintBox"></div>
<div class="row" id="buttonBox">
<div class="col-4 col-m-4 col-s-3 button"><button id="skipButton" class="skip-btn" onclick="skipButton();">Skip</button></div>
<div class="col-4 col-m-4 col-s-5 button"><button id="hintButton" class="hint-btn" onclick="provideHint();">Give a hint</button></div>
<div class="col-4 col-m-4 col-s-4 button"><button id="submitButton" class="submit-btn" onclick="provideFeedback();">Submit</button></div>
</div>
</div>
</div>
<div class="row" id="feedbackContainer"></div>
<!--<div id="feedbackContainer" class="col-12 col-m-12 col-s-12"></div>
</div>-->
<div class="row" id="furthertopicsContainer" >
<!--<div id="furthertopicsContainer" class="col-12 col-m-12 col-s-12"></div>-->
</div>
<div class="row" id="nextButtonContainer">
<!--<div class="col-12 col-m-12 col-s-12 button" id="nextButtonContainer">-->
<button id="moreLikeThisButton" class="more-btn col-6 col-m-12 col-s-12" onclick="nextButtonFunction();">More Like This</button>
<button id="lessLikeThisButton" class="less-btn col-6 col-m-12 col-s-12" onclick="nextButtonFunction();">Fewer Like This</button>
<!--<button id="nextButton" class="next-btn col-6 col-m-12 col-s-12" style="display:none;" onclick="nextButtonFunction();">Next Question</button>-->
<!--</div>-->
</div>
<div class="row">
<div id="resultContainer" class="col-12 col-m-12 col-s-12" style="display:none;"></div>
</div>
<div class="row">
<div id="outerContainer" class="col-12 col-m-12 col-s-12">
<div id="imageCreditsContainer" >
<div id="creditsHeading" class="col-12 col-m-12 col-s-12" align="center"><h3>Image Credits</h3></div>
<div id="creditsContainer" class="col-12 col-m-12 col-s-12"></div>
</div>
</div>
</div>
</div>
<div id="playlistContainer" class="col-12 col-m-12 col-s-12">
<div id="playlistHeading" align="center"><h2>Your Pinned Topics</h2></div>
<div id="playlistContents" class="col-12 col-m-12 col-s-12">
<!--<div class="row" id="playlistBox">-->
<div id="playlist" class="col-12 col-m-12 col-s-12"></div>
<!--</div>-->
</div>
</div>
<div id="contentContainer" class="col-3 col-m-12 col-s-12">
<div id="contentHeading" align="center"><h2>Your Current Playlist</h2></div>
<div id="contentsBox" class="col-12 col-m-12 col-s-12">
<div id="contents" class="col-12 col-m-12 col-s-12"></div>
</div>
</div>
</div>
<script src="question.js"></script>
<script src="quiz-script.js"></script>
<script src="topics.js"></script>
</body>
</html>