-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
243 lines (234 loc) · 11.4 KB
/
index.html
File metadata and controls
243 lines (234 loc) · 11.4 KB
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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="images/lj.png" />
<title>LiquidJava Quiz</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<meta charset="utf-8">
<style>
body {
font-family: sans-serif;
}
code, pre {
font-family: monospace;
}
h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
font-size: inherit;
}
ul li {
list-style-type: none;
}
code {
background-color: #e0f2fe;
color: #0369a1;
padding: 2px 6px;
border-radius: 4px;
}
.btns-container {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="form-row">
<div class="container">
<br />
<h1>LiquidJava Quiz</h1>
<p>Test your knowledge about LiquidJava concepts including refinements, object state modeling and ghost variables!</p>
<img src="images/banner.gif" alt="LiquidJava Banner"/>
<ol>
<li>
<p>Liquid types allow developers to catch bugs at:</p>
<ul class="radio-list">
<li><label><input type="radio" data-question="1" data-content="0" /> Execution time</label></li>
<li><label><input type="radio" data-question="0" data-content="1" /> Compile time</label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> Deployment time</label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> Testing time</label></li>
</ul>
</li>
<li>
<p>Liquid types can prevent which of the following bugs? <strong>(Select all that apply)</strong> </p>
<ul class="checklist">
<li><label><input type="checkbox" data-question="0" data-content="1" /> Array index out-of-bounds</label></li>
<li><label><input type="checkbox" data-question="0" data-content="1" /> Null pointer exceptions</label></li>
<li><label><input type="checkbox" data-question="1" data-content="0" /> Memory leaks</label></li>
<li><label><input type="checkbox" data-question="0" data-content="1" /> Division by zero</label></li>
</ul>
</li>
<li>
<p>In LiquidJava, what integer values for <code>x</code> are allowed with this refinement? <code>@Refinement("x > 0")</code></p>
<ul class="radio-list">
<li><label><input type="radio" data-question="1" data-content="0" /> All values</label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> All negative values</label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> All non-negative values</label></li>
<li><label><input type="radio" data-question="0" data-content="1" /> All positive values</label></li>
</ul>
</li>
<li>
<p>In LiquidJava, which of the following can be refined? <strong>(Select all that apply)</strong></p>
<ul class="checklist">
<li><label><input type="checkbox" data-question="0" data-content="1" /> Variables</label></li>
<li><label><input type="checkbox" data-question="0" data-content="1" /> Parameters</label></li>
<li><label><input type="checkbox" data-question="0" data-content="1" /> Return values</label></li>
<li><label><input type="checkbox" data-question="1" data-content="0" /> Imports</label></li>
</ul>
</li>
<li>
<p>In LiquidJava, which of the following is <strong>not</strong> a valid refinement?</p>
<ul class="radio-list">
<li><label><input type="radio" data-question="1" data-content="0" /> <code>@Refinement("x == 1 || x == -1")</code></label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> <code>@Refinement("x > 0")</code></label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> <code>@Refinement("x % 2 == 0")</code></label></li>
<li><label><input type="radio" data-question="0" data-content="1" /> <code>@Refinement("x + 1")</code></label></li>
</ul>
</li>
<li>
<p>In LiquidJava, to specify that a method should only be called when the object is in a certain state, we should use a:</p>
<ul class="radio-list">
<li><label><input type="radio" data-question="0" data-content="1" /> <code>@StateRefinement</code></label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> <code>@Refinement</code></label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> <code>@RefinementAlias</code></label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> <code>@RefinementPredicate</code></label></li>
</ul>
</li>
<li>
<p>In LiquidJava, what does the following state refinement mean? <code>@StateRefinement(from="!closed(this)", to="closed(this)")</code></p>
<ul class="radio-list">
<li><label><input type="radio" data-question="1" data-content="0" /> The method can only be called when the object is closed and will leave it closed</label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> The method can only be called when the object is open and will leave it open</label></li>
<li><label><input type="radio" data-question="0" data-content="1" /> The method can only be called when the object is not closed and will leave it closed</label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> The method can be called in any state and will leave it closed</label></li>
</ul>
</li>
<li>
<p>In LiquidJava, the <code>@ExternalRefinementsFor</code> annotation is used to:</p>
<ul class="radio-list">
<li><label><input type="radio" data-question="1" data-content="0" /> Import refinements from external libraries</label></li>
<li><label><input type="radio" data-question="0" data-content="1" /> Define new refinements for an external class or interface</label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> Export refinements to other modules</label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> None of the above</label></li>
</ul>
</li>
<li>
<p>In LiquidJava, a ghost variable is used to:</p>
<ul class="radio-list">
<li><label><input type="radio" data-question="1" data-content="0" /> Store temporary data during the program execution</label></li>
<li><label><input type="radio" data-question="0" data-content="1" /> Model abstract properties of objects for verification purposes</label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> Track memory usage of the program</label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> Replace regular variables for better performance</label></li>
</ul>
</li>
<li>
<p>In LiquidJava, which of the following refinements updates the ghost variable <code>size</code>?</p>
<ul class="radio-list">
<li><label><input type="radio" data-question="1" data-content="0" /> <code>@Refinement("size = 0")</code></label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> <code>@StateRefinement(from="size(this) > 0")</code></label></li>
<li><label><input type="radio" data-question="1" data-content="0" /> <code>@Refinement("size == 0")</code></label></li>
<li><label><input type="radio" data-question="0" data-content="1" /> <code>@StateRefinement(to="size(this) == size(old(this)) + 1")</code></label></li>
</ul>
</li>
</ol>
</div>
</div>
<div id="tg-msg" class="alert" role="alert" style="display: none">
<span id="tg-correct-questions"></span> Correct! <br /><b>Rating: <span id="tg-score"></span>%</b>
</div>
<div class="row btns-container">
<button id="check-questions" class="btn btn-md btn-success">Check Answers</button>
<button id="reset-questions" class="btn btn-link">Reset All</button>
</div>
<br />
<script type="text/javascript">$(function(){
$('ul.radio-list,ul.checklist,ul.textbox').each(function(i, el){
var questionClass = $(this).attr('class');
$(this).parent().addClass('question-row').addClass(questionClass);
if (questionClass=='radio-list') {
$(this).find('input[type="radio"]').attr('name', 'radio-question-' + i);
}
});
function checkQuestion() {
resetQuestions(true);
var questions = $('li.question-row');
var total_questions = questions.length;
var correct = 0;
questions.each(function(i, el) {
var self = $(this);
// Single Question.
if (self.hasClass('radio-list')) {
if (self.find('input[type="radio"][data-content="1"]:checked').length == 1) {
correct += 1;
} else {
self.addClass('text-danger');
}
}
// Textbox Question.
if(self.hasClass('textbox')) {
var textbox = self.find('input[type="text"]');
var correct_text = String(textbox.data("content")).trim().split("").reverse().join("");
if(String(textbox.val()).trim().toLowerCase()==correct_text.toLowerCase()) {
correct += 1;
} else {
self.addClass('text-danger');
textbox.parent().find("i.text-correct").html(correct_text);
}
}
// Multiple selection Questions.
if(self.hasClass('checklist')) {
var total_corrects = self.find('input[type="checkbox"][data-content="1"]').length;
var total_incorrects = self.find('input[type="checkbox"][data-content="0"]').length;
var correct_selected = self.find('input[type="checkbox"][data-content="1"]:checked').length;
var incorrect_selected = self.find('input[type="checkbox"][data-content="0"]:checked').length;
var qc = +((correct_selected / total_corrects) - (incorrect_selected/total_incorrects)).toFixed(2);
if (qc < 0) {
qc = 0;
}
correct += qc;
if (qc == 0) {
self.addClass('text-danger');
} else if (qc > 0 && qc < 1) {
self.addClass('text-warning');
}
}
});
showScore(correct, total_questions);
}
function showScore(correct, total) {
var score = (correct / total).toFixed(2) * 100;
var msgClass = 'alert-danger';
if (score >= 70) {
msgClass = 'alert-success';
} else if (score >= 50) {
msgClass = 'alert-warning';
}
$('#tg-correct-questions').text(correct + ' out of ' + total);
$('#tg-score').text(score);
$('#tg-msg').addClass(msgClass).show();
}
function resetQuestions(keep) {
$('li.question-row').removeClass('text-danger').removeClass('text-warning');
$('i.text-correct').html('');
$('#tg-msg').removeClass('alert-danger').removeClass('alert-success').removeClass('alert-warning').hide();
if(keep === true) {
return;
}
$('li.question-row').find('input[type="text"]').val('');
$('li.question-row').find('input[type="radio"],input[type="checkbox"]').prop('checked', false);
}
$('#check-questions').on('click', checkQuestion);
$('#reset-questions').on('click', resetQuestions);
});</script>
</div>
</body>
</html>