-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathordering.html
181 lines (172 loc) · 9.17 KB
/
ordering.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
181
<!DOCTYPE html>
<html>
<head>
<style>
/* Default Bootstrap colors do not pass contrast checks */
button.btn-success {
background-color: green;
}
button.btn-danger {
background-color: #dc143c;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
function createCode()
{
// throw alert if answers 1 and 2 are empty
if (document.getElementById("order1").value == "" && document.getElementById("order2").value == "") {
window.alert("Please enter order answers for at least 1 and 2.")
} else {
// create array for original order input by instructor
var origArray = [];
var origColl = document.getElementsByName("order");
for (var i = 0; i < origColl.length; i++) {
if (origColl[i].value !== null && origColl[i].value !== '')
{ origArray.push(origColl[i].value); }
else
{ break; }
} // end of for loop
// only create code if original collection is not empty
for (var i = 0; i < origColl.length; i++) {
if (origColl[i].value !== null && origColl[i].value !== '')
{
// shuffle original array elements
do {
var shuffledArray = d3.shuffle(origArray.slice());
} while (JSON.stringify(shuffledArray) === JSON.stringify(origArray));
// display directions
var directions = document.getElementById("directions").value;
document.getElementById("generate").insertAdjacentHTML('beforeend', '<pre><fieldset><legend>' + directions + '</legend></pre>');
// display shuffled array elements next to input boxes
var qnumber = document.getElementById("qnumber").value;
for (var i = 0; i < shuffledArray.length; i++) {
document.getElementById("generate").insertAdjacentHTML('beforeend', '<pre><p><label> <input id="order-answer' + qnumber + (i+1) + '" name="order-answer' + qnumber + '" type="text" size="1"> ' + shuffledArray[i] + '</label></p></pre>');
} // end of for loop
document.getElementById("generate").insertAdjacentHTML('beforeend', '<pre><button class="btn btn-dark" onclick="checkOrder' + qnumber + '()">Check Answer</button> <br><br> <div id="order-result' + qnumber + '" role="alert"><p>Feedback will show here.</p></div><script> var ORclicks' + qnumber + ' = 0; function checkOrder' + qnumber + '() {ORclicks' + qnumber + ' += 1; var guessArray = []; var guessColl = document.getElementsByName("order-answer' + qnumber + '"); for (var i = 0; i < guessColl.length; i++) { if (guessColl[i].value !== null && guessColl[i].value !== "") { guessArray.push(guessColl[i].value); } } var correctOrder = [');
for (var i = 0; i < shuffledArray.length; i++) {
document.getElementById("generate").insertAdjacentHTML('beforeend', '<pre>"' + (origArray.indexOf(shuffledArray[i]) + 1) + '", ');
} // end of for loop
document.getElementById("generate").insertAdjacentHTML('beforeend', '<pre>]; if (JSON.stringify(guessArray) === JSON.stringify(correctOrder)) { var green = document.createElement("strong"); green.style.color = "green"; green.innerHTML = "Attempt " + ORclicks' + qnumber + ' + ": Correct!"; var element = document.getElementById("order-result' + qnumber + '").children[0]; element.replaceChild(green, element.childNodes[0]); } else { var red = document.createElement("strong"); red.style.color = "#dc143c"; red.innerHTML = "Attempt " + ORclicks' + qnumber + ' + ": Incorrect! Try again!"; var element = document.getElementById("order-result' + qnumber + '").children[0]; element.replaceChild(red, element.childNodes[0]); } } </script> </fieldset></pre>');
} // end of if collection not empty
else
{
break;
}
} // end of for loop
} // end of check for empty 1 & 2 boxes
} // end of createCode function
function copyCode(id)
{
var r = document.createRange();
r.selectNode(document.getElementById(id));
window.getSelection().removeAllRanges();
window.getSelection().addRange(r);
document.execCommand('copy');
window.getSelection().removeAllRanges();
}
function clearCode(id)
{
if (confirm("Are you sure you want to clear the code?"))
document.getElementById(id).innerHTML = "";
}
function clearQuestion()
{
if (confirm("Are you sure you want to clear the question?")) {
document.getElementById("qnumber").value = "";
document.getElementById("directions").value = "";
for (var i = 0; i < document.getElementsByName("order").length; i++) {
document.getElementsByName("order")[i].value = "";
}
}
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-10 offset-sm-1">
<h1>Create Code for Ordering Questions</h1>
<h2>Sample Ordering Question</h2>
<fieldset><legend>Order the following states from largest (1) to smallest (6) by area.</legend>
<p><label><input id="order-answer1" name="order-answer" type="text" size="1" /> Louisiana</label></p>
<p><label><input id="order-answer2" name="order-answer" type="text" size="1" /> South Carolina</label></p>
<p><label><input id="order-answer3" name="order-answer" type="text" size="1" /> Oklahoma</label></p>
<p><label><input id="order-answer4" name="order-answer" type="text" size="1" /> Alaska</label></p>
<p><label><input id="order-answer5" name="order-answer" type="text" size="1" /> Montana</label></p>
<p><label><input id="order-answer6" name="order-answer" type="text" size="1" /> Rhode Island</label></p>
<button class="btn btn-dark" onclick="checkOrder()">Check Answer</button> <br /><br />
<div id="order-result" role="alert"><p>Feedback will show here.</p></div>
<script>
var ORclicks = 0;
function checkOrder() {
ORclicks += 1;
// create array from student guesses
var guessArray = [];
var guessColl = document.getElementsByName("order-answer");
for (var i = 0; i < guessColl.length; i++) {
if (guessColl[i].value !== null && guessColl[i].value !== '') {
guessArray.push(guessColl[i].value);
}
}
// set correct order
var correctOrder = ["4", "5", "3", "1", "2", "6"];
// determine if student guesses match correct order
if (JSON.stringify(guessArray) === JSON.stringify(correctOrder))
{
var green = document.createElement("strong");
green.style.color = "green";
green.innerHTML = "Attempt " + ORclicks + ": Correct!";
var element = document.getElementById("order-result").children[0];
element.replaceChild(green, element.childNodes[0]);
}
else
{
var red = document.createElement("strong");
red.style.color = "#dc143c";
red.innerHTML = "Attempt " + ORclicks + ": Incorrect! Try again!";
var element = document.getElementById("order-result").children[0];
element.replaceChild(red, element.childNodes[0]);
}
}
</script>
<hr />
<h2>Create Your Own Question:</h2>
<p>Required fields are marked with an asterisk (*).</p>
<fieldset><legend>Ordering Question</legend>
<p><label>Enter the question number. <input id="qnumber" type="text" size="5"/> (Leave blank if you only need one ordering question per page)</label></p>
<p><label>Enter the directions for your ordering question. * <input id="directions" type="text" size="50" required/></label></p>
<p>Enter the answers in the correct order below. They will be shuffled when the code is generated. (You do not have to use all six.)</p>
<p><label>1. * <input id="order1" name="order" type="text" size="50" required/></label></p>
<p><label>2. * <input id="order2" name="order" type="text" size="50" required/></label></p>
<p><label>3. <input id="order3" name="order" type="text" size="50" /></label></p>
<p><label>4. <input id="order4" name="order" type="text" size="50" /></label></p>
<p><label>5. <input id="order5" name="order" type="text" size="50" /></label></p>
<p><label>6. <input id="order6" name="order" type="text" size="50" /></label></p>
</fieldset>
<p><button class="btn btn-success" onclick="createCode()">Create Code</button> <button id="clearQ" class="btn btn-danger" onclick="clearQuestion()">Clear Question</button></p>
<p>Code will generate below:</p>
<p id="generate" style="user-select: all;" class="bg-light"></p>
<button id="copied" class="btn btn-success" onclick="copyCode('generate')">Copy Code</button> <button id="clear" class="btn btn-danger" onclick="clearCode('generate')">Clear Code</button><hr />
<h2> Copy & Paste Code</h2>
<p>Click the Copy Code button above to copy the code to the clipboard. On your D2L page, open the HTML editor, click the Insert Stuff icon, choose Enter Embed Code, right-click and choose Paste. (The preview will not be accurate.)</p>
<p><strong>Make sure to click Save and Close BEFORE testing the buttons. DO NOT CLICK on the buttons while still in editing mode or D2L will change the code.</strong></p>
<p>To add another question, click Clear Question and Clear Code above to clear out the boxes and start over.</p>
<p>Student answers are not tracked or graded and will be reset when refreshing the page.</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#copied').tooltip({title: "Code Copied!", trigger: "click", placement: "bottom"});
});
$('#clear').click(function(){
$('#copied').tooltip('hide');
});
</script>
</body>
</html>