-
Notifications
You must be signed in to change notification settings - Fork 0
/
init.html
151 lines (150 loc) · 8.12 KB
/
init.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
<!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/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>
<!-- P(init) -->
<body class="reveal-mastery">
<!-- Mastery Bar -->
<div id="mastery" class="hide">
<div id="progress" style="width:16%"><span>P(init)</span></div>
<h5 class="bar-label" style="left:16%"><span>←</span> You (0.16)</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='more-letters' class="auto-cont">
<div class="content">
<p>
Let's learn a few more ASL letters:
</p>
<div class="letter-box">
<div class="letter">
<img class="letter-image" src="img/letters/a.png" title="A" alt="The letter A in ASL">
<div class="letter-text"><p>This is a</p> <h3 class="red">A</h3></div>
</div>
<div class="letter">
<img class="letter-image" src="img/letters/c.png" title="C" alt="The letter C in ASL">
<div class="letter-text"><p>This is a</p> <h3 class="yellow">C</h3></div>
</div>
<div class="letter">
<img class="letter-image" src="img/letters/s.png" title="S" alt="The letter S in ASL">
<div class="letter-text"><p>This is a</p> <h3 class="dark-green">S</h3></div>
</div>
</div>
<p>
And here are the three letters you already know:
</p>
<div class="letter-box">
<div class="letter">
<img class="letter-image" src="img/letters/b.jpg" title="B" alt="The letter B in ASL">
<div class="letter-text"><p>This is a</p> <h3 class="orange">B</h3></div>
</div>
<div class="letter">
<img class="letter-image" src="img/letters/k.jpg" title="K" alt="The letter K in ASL">
<div class="letter-text"><p>This is a</p> <h3 class="light-pink">K</h3></div>
</div>
<div class="letter">
<img class="letter-image" src="img/letters/t.jpg" title="T" alt="The letter T in ASL">
<div class="letter-text"><p>This is a</p> <h3 class="dark-pink">T</h3></div>
</div>
</div>
<i class="continue hide fa fa-caret-down auto" title="Continue" aria-hidden="true" link="#quiz-two"></i>
</div>
</section>
<!-- Slide 2 -->
<section id='quiz-two' class="quiz hide">
<div class='content'>
<p>Ok, time for another quiz!</p>
<div class="three-letters" title="Guess the word" alt="CAT spelled in American Sign Language">
<img class="letter-image" src="img/letters/c.png" title="Guess the word" alt="The letter C in ASL">
<img class="letter-image" src="img/letters/a.png" title="Guess the word" alt="The letter A in ASL">
<img class="letter-image" src="img/letters/t.jpg" title="Guess the word" alt="The letter T in ASL">
</div>
<h3>What is the word above?</h3>
<form id="q2" class="one-input">
<input class="text" type="text" id="a2" title="Type guess here..." placeholder="Type guess here..." output="#guess" />
<input class="button" id="b2" title="Submit guess!" type="button" value="Submit guess!" link="#cat-answer">
</form>
</div>
</section>
<!-- Slide 3 -->
<section id="cat-answer" class="hide">
<div class="content">
<p id="guess" class="output"><b>You guessed:</b> </p>
<img id="cat-img" src="img/cat.jpg" title="cat" alt="Silhouette of a cat" />
<p class="center answer">
<b>Answer:</b> cat
</p>
<p>
Did you get it right? Hopefully, that question was easier than the first one. So what do you think happened?
<span id="reveal-init" title="Tell me!" class="link reveal">Tell me!</span>
</p>
<p class="reveal-text hide">
Well, this is connected to our next BKT parameter: <b>P(init)</b>. This is the probability that the student already
knew the skill before being tested. The "init" reflects the fact that P(init) is essentially measuring a student's
level of initial knowledge <i>prior</i> to a practice opportunity.
</p>
<i class="continue hide fa fa-caret-down" title="Continue" aria-hidden="true" link="#init-change"></i>
</div>
</section>
<!-- Slide 4 -->
<section id="init-change" class="hide">
<div class="content">
<p>
How do you think your P(init) changed from the first question to the second?
</p>
<div class="button-container">
<p class="button-top-text">I think it...</p>
<div class="buttons">
<input class="button choice" id="inc" title="Increased" type="button" value="Increased" correct="yes">
<input class="button choice" id="dec" title="Decreased" type="button" value="Decreased" correct="no">
<input class="button choice" id="same" title="Didn't change" type="button" value="Didn't change" correct="no">
</div>
</div>
<div class="init-ans hide">
<p class="reveal-ans">Yes, your P(init) <b>increased!</b></p>
<p>
What does that mean? Well, before the first question, you likely didn't know much (or anything) about ASL,
but now you've learned six letters of the alphabet and can recognize some spelled out words. In other words,
your knowledge of ASL has <i>increased</i>.
</p>
</div>
<i class="continue hide fa fa-caret-down" title="Continue" aria-hidden="true" link="#mastery-bar"></i>
</div>
</section>
<!-- Slide 5 -->
<section id="mastery-bar" class="hide last-slide has-reveal">
<div class="content">
<i id="mastery-arrow" class="fa fa-long-arrow-up" aria-hidden="true"></i>
<p>
BKT estimates the probability that a student has learned a skill with P(init). As it will turn out,
P(guess) and the other BKT parameters help update P(init) over time. Once P(init) exceeds a threshold,
which is typically set at <b>0.95</b>, we say that the student has achieved <span class="emphasis">mastery</span>.
However, this mastery threshold can vary depending on the situation.
</p><p>
Let’s track your own journey to mastery! You can see your current P(init) with the <b>mastery bar</b> at the top of the page.
<i>Hover over the bar to view probabilities.</i>
<span id="reveal-next" title="Got it!" class="link reveal">Got it!</span>
</p><p class="reveal-text hide">
Alright, let’s continue learning about more parameters!
</p>
</div>
<a class="next-page hide" title="Next Page" href="transit" target="_self">Next <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a>
</section>
<script src="js/script.js"></script>
</body>
</html>