-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
180 lines (179 loc) · 11.1 KB
/
test.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Bayesian Knowledge Tracing</title>
<meta name="description" content="Explaining Bayesian Knowledge Tracing Using ASL">
<meta property="og:image" content="img/socimg.png" />
<link rel="stylesheet" href="css/test.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="img/icon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<!-- TEST -->
<body>
<!-- Mastery Bar -->
<div id="mastery">
<div id="progress" style="width:32%"><span>P(init)</span></div>
<h5 id="you-label" class="bar-label" style="left:32%"><span>←</span> You (0.32)</h5>
<div id="labels">
<h5 class="left">0</h5>
<h5 class="right">1</h5>
</div>
<h5 class="bar-label right" style="right:5%">Mastery (0.95) <span>→</span></h5>
<div id="mastery-line"></div>
</div>
<!-- Slide 1 -->
<section id='match-params' class="start-test">
<div class='content'>
<h3>Putting it all together</h3>
<p class="center"><em>It's time to put your knowledge to the test!</em></p>
<p id="test-text">How do the settings below relate to the BKT parameters? Answer the questions to the right. <i>The sliders will unlock before the test begins.</i></p>
<div id="mini-mastery" class="hide">
<h5 class="left">0</h5>
<div class="progress-bar">
<div id="progress" style="width:25%"><span><b>P(init):</b> 0.25</span></div>
<div id="mastery-line"></div>
</div>
<h5 class="right">1</h5>
</div>
<div id="test-screen" class="two-grid">
<div class="sliders test">
<div class="slider-all">
<h5 id="slip-label" class="slider-param-label dark-orange inactive" param="P(slip)">Letter Similarity: <span class="prob" id="slip-prob">0.5</span></h5>
<p class="param-desc">When similarity is low (closer to 0), you'll see letters that look <i>less</i> similar.</p>
<div class="slider-container clicked">
<p class="slider-label">0</p>
<input type="range" min="0.0" max="1.0" value="0.5" step="0.01" class="slider orange" id="slip-slider" />
<p class="slider-label">1</p>
</div>
</div>
<div class="slider-all">
<h5 id="guess-label" class="slider-param-label pink inactive" param="P(guess)">Letter Familiarity: <span class="prob" id="guess-prob">0.5</span></h5>
<p class="param-desc">When familiarity is low (closer to 0), you're likely to see letters you <i>haven't</i> learned before.</p>
<div class="slider-container clicked">
<p class="slider-label">0</p>
<input type="range" min="0.0" max="1.0" value="0.5" step="0.01" class="slider pink" id="guess-slider" />
<p class="slider-label">1</p>
</div>
</div>
<div class="slider-all">
<h5 id="transit-label" class="slider-param-label darker-pink inactive" param="P(transit)">Time to Sign: <span class="prob" id="transit-prob">0.5</span></h5>
<p class="param-desc">When time is low (closer to 0), words will be signed more <i>quickly</i>.</p>
<div class="slider-container clicked">
<p class="slider-label">0</p>
<input type="range" min="0.0" max="1.0" value="0.5" step="0.01" class="slider dark-pink" id="transit-slider" />
<p class="slider-label">1</p>
</div>
</div>
</div>
<form id="q6" class="fill-in-blanks">
<div id="congrats-msg" class="hide">
<h3>Great Work!</h3>
<p>
Press try again to repeat the simulation with different parameters. Otherwise, select continue.
</p>
<div class="buttons two-opt">
<a class="button again" id="ba" title="Try Again">Try Again</a>
<a href="modules" target="_self" class="button cont" id="bc" title="Continue">Continue</a>
</div>
</div>
<div class="test-q hide">
<img id="test-img" src="gif/letters/blank.gif" />
<p>What is the word being signed above?</p>
<input class="text" type="text" id="a1" title="Type guess here..." placeholder="Type guess here..." ans />
<input class="button test" id="b1" title="Submit guess!" type="button" value="Submit guess!">
</div>
<p id="test-instruct" class="light-text">
<i>Click to fill in the blanks! Each parameter should only be used once.</i>
</p>
<div id="match-grid" class="two-grid">
<p>
Which parameter is <i>most directly</i> impacted by <b class="dark-orange">letter similarity</b>?
</p>
<select id="blank1" class="orange" name="sim" title="Fill in the blank!" correct="slip">
<option disabled selected value=""> -- select -- </option>
<option value="guess">P(guess)</option>
<option value="slip">P(slip)</option>
<option value="transit">P(transit)</option>
</select>
<p>
Which parameter is <i>most directly</i> impacted by <b class="pink">letter familiarity</b>?
</p>
<select id="blank2" class="pink" name="fam" title="Fill in the blank!" correct="guess">
<option disabled selected value=""> -- select -- </option>
<option value="guess">P(guess)</option>
<option value="slip">P(slip)</option>
<option value="transit">P(transit)</option>
</select>
<p>
Which parameter is <i>most directly</i> impacted by <b class="darker-pink">time to sign</b>?
</p>
<select id="blank3" class="dark-pink" name="time" title="Fill in the blank!" correct="transit">
<option disabled selected value=""> -- select -- </option>
<option value="guess">P(guess)</option>
<option value="slip">P(slip)</option>
<option value="transit">P(transit)</option>
</select>
</div>
<input class="button validate" id="b6" title="Submit answer" type="button" value="Submit answer" link="#match-reveal" update="38">
<input class="button begin hide" id="b7" title="Start" type="button" value="Start">
</form>
</div>
</div>
</section>
<!-- Slide 2 -->
<section id="match-reveal" class="hide no-reveal">
<div class="content">
<p class="center ans-list">
<b>Answers:</b> <span class="dark-orange blank-answer">letter similarity — P(slip)</span>
<span class="pink blank-answer">letter familiarity — P(guess)</span>
<span class="darker-pink blank-answer">time to sign — P(transit)</span>
</p>
<p>
You got it! Time for a <b>thought question:</b> why was P(init) not an answer option for the 3 questions you just answered?
</p>
<p><i>Hint: How is P(init) inherently different from the other three parameters? What is its role in BKT? Think mastery bar.</i></p>
<div>
<p><span id="reveal-match" title="Tell me!" class="link reveal">Tell me!</span></p>
<p class="reveal-text hide">
Remember that we ultimately use P(init) to estimate skill mastery. The other parameters —P(guess), P(slip), and P(transit)—
are used to update P(init)'s value, but they themselves remain constant throughout the learning exercises.
</p>
</div>
<i class="continue hide fa fa-caret-down" title="Continue" aria-hidden="true" link="#math-mod" update="42"></i>
</div>
</section>
<!-- Slide 3 -->
<section id="math-mod" class="hide">
<div class="content">
<p>
<i>Optional: Learn about the math behind BKT by expanding the section below.</i> Press continue when you're ready to move on.
</p>
<p class="align-right"><span class="link load-test" title="Continue">Continue →</span></p>
<div class="expand dark button" title="See the math">See the math <span>+</span></div>
<div class="math-desc hide">
<p>
Every time the student answers a question, BKT calculates <b>P(learned)</b>, the probability that the student has learned the skill
they are working on, using the values of our 4 main parameters. The formula for P(learned) depends on whether their response was correct.
</p>
<p>
First, we compute the conditional probability that the student learned the skill previously (at time <i>n-1</i>), based on whether they answered the current
question (at time <i>n</i>) correctly or incorrectly.
</p>
<img class="formula" src="img/formulas/rightformula.png" />
<img class="formula" src="img/formulas/wrongformula.png" />
<p>Then, we use the result of our first calculation to compute the conditional probability that the student has learned the skill now (at time <i>n</i>).</p>
<img class="formula long" src="img/formulas/learnedformula.png" />
<p>For the next question, we use P(learned) as the new value of P(init). And as you now know, once P(init) ≥ 0.95, we say that the student has achieved mastery.</p>
</div>
</div>
</section>
<script src="js/words.js"></script>
<script src="js/test.js"></script>
<script src="js/script.js"></script>
</body>
</html>