-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
105 lines (89 loc) · 4.68 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Irregular Verbs Quiz</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container" id="introduction-text">
<img class="title-text" src="css/images/irregular-verbs-title.png" alt="Irregular Verbs Quiz" width="1000" height="250">
<p>What do you think is the best way to study irregular verbs? Your studies will
be more effective if you start learning the ones that are more often encountered
in the English language and then gradually move on to the ones that are less used
until your vocabulary is as good as you want it to be.
<br><br>
Study the ranked irregular verbs list by clicking
<a href="https://www.geisteswissenschaften.fu-berlin.de/we06/arbeitsbereiche/didaktik_des_englischen/primary/buecher/IrregVerbs/index.html">here</a>
and practice your vocabulary with the quiz below.
</p>
</div>
<br>
<div class="container" id="application">
<!-- Number of learned words to be included in the shuffling process -->
<div class="container" type="file" id="student-data">
<!-- Data of the student who is currently playing the game -->
<div>
<label>Learned words: </label><input type="number" id="learned-words" min="1" max="100" value="5"></input>
<br>
<!-- Past Simple (label and checkbox) -->
<input type="checkbox" id="include-past-simple" onclick="togglePastSimple()">
<label>Include Past Simple</label>
<!-- Past Participle (label and checkbox) -->
<input type="checkbox" id="include-past-participle" onclick="togglePastParticiple()">
<label>Include Past Participle</label>
</div>
</div>
<!-- Quiz area -->
<span class="container" id="quiz-area">
<span id="wizard-container">
<img class="character" id="wizard" src="css/images/wizard.png" width="350px" height="350px" alt="Wizard">
</span>
<span id="quiz-board-text">
<span id="message">
</span>
<span class="container" id="quiz-labels">
<label class="answers">Infinitive:</label> <label class="answers" id="answer-infinitive"></label><br>
<label class="answers">Past Simple:</label> <input class="answers" type="text" id="answer-past-simple" maxlength="20" autocomplete="off"></input><br>
<label class="answers">Past Participle:</label> <input class="answers" type="text" id="answer-past-participle" maxlength="20" autocomplete="off"></input>
</span>
</span>
<label>Word number: </label><label id="word-no"> 0</label>
<label>Correct Answers:</label> <label id="correct-pct">0.00</label><label>%</label>
<div class="score">
<div class="score-percent"></div>
</div>
</span>
<div class="container" id="final-buttons">
<div class="container" id="results">
<button class="btn-yellow" id="btn-show-answer">CHECK ANSWER</button>
<br><br>
<button class="btn-yellow" id="btn-start">START QUIZ</button>
<button class="btn-yellow" id="btn-reset">RESET QUIZ</button>
<button class="btn-yellow" id="btn-end">END QUIZ</button>
</div>
</div>
<br>
<!-- Quiz log -->
<div class="container" id="quiz-log">
<table id="quiz-log-table">
<thead>
<th colspan="4">Quiz Log</th>
</thead>
<thead>
<th>Infinitive</th>
<th>Past Simple</th>
<th>Past Participle</th>
<th>Status</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- Controlling index.html itself -->
<script src="js/jquery.js"></script>
<script src="js/verbs-list.js"></script>
<script src="js/file.js"></script>
</body>
</html>