forked from jenniferwagner18/knowledge-checks
-
Notifications
You must be signed in to change notification settings - Fork 0
/
matching.html
166 lines (147 loc) · 9.62 KB
/
matching.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
<!DOCTYPE html>
<html>
<head>
<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>
<style>
/* Default Bootstrap colors do not pass contrast checks */
button.btn-success {
background-color: green;
}
button.btn-danger {
background-color: #dc143c;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-10 offset-sm-1">
<h1>Create Code for Matching Questions</h1>
<h2>Sample Matching Question</h2>
<fieldset><legend>Choose a university in the left column and then choose the corresponding mascot in the right column.</legend>
<div class="container">
<div class="row">
<div class="col-sm"><p>Choices:</p>
<input type="button" class="btn btn-light btn-block" value="Purdue" onclick="this.value='1. Purdue'; this.style.backgroundColor='#B81414'; this.style.color='white';" />
<input type="button" class="btn btn-light btn-block" value="Michigan State" onclick="this.value='2. Michigan State'; this.style.backgroundColor='#AB5D03'; this.style.color='white';" />
<input type="button" class="btn btn-light btn-block" value="Penn State" onclick="this.value='3. Penn State'; this.style.backgroundColor='#6E7002'; this.style.color='white';" />
<input type="button" class="btn btn-light btn-block" value="Michigan" onclick="this.value='4. Michigan'; this.style.backgroundColor='#02701E'; this.style.color='white';" />
<input type="button" class="btn btn-light btn-block" value="Rutgers" onclick="this.value='5. Rutgers'; this.style.backgroundColor='#144BB8'; this.style.color='white';" />
<input type="button" class="btn btn-light btn-block" value="Illinois" onclick="this.value='6. Illinois'; this.style.backgroundColor='#2B0270'; this.style.color='white';" />
<p></p>
</div>
<div class="col-sm"><p>Matches:</p>
<input type="button" class="btn btn-light btn-block" value="Scarlet Knights" onclick="this.style.backgroundColor='#144BB8'; this.style.color='white'; this.value='5. Scarlet Knights';" />
<input type="button" class="btn btn-light btn-block" value="Wolverines" onclick="this.style.backgroundColor='#02701E'; this.style.color='white'; this.value='4. Wolverines';" />
<input type="button" class="btn btn-light btn-block" value="Nittany Lions" onclick="this.style.backgroundColor='#6E7002'; this.style.color='white'; this.value='3. Nittany Lions';" />
<input type="button" class="btn btn-light btn-block" value="Illini" onclick="this.style.backgroundColor='#2B0270'; this.style.color='white'; this.value='6. Illini';" />
<input type="button" class="btn btn-light btn-block" value="Boilermakers" onclick="this.style.backgroundColor='#B81414'; this.style.color='white'; this.value='1. Boilermakers';" />
<input type="button" class="btn btn-light btn-block" value="Spartans" onclick="this.style.backgroundColor='#AB5D03'; this.style.color='white'; this.value='2. Spartans';" /></div>
</div>
</div>
</fieldset>
<hr />
<h2>Create Your Own Question:</h2>
<p>Instruct students to choose a button in the left column and then choose the matching button in the right column. Both numbers and colors will appear with the text you input to indicate the matches. Each color used is distinguishable from the others for eight types of color blindness.</p>
<fieldset>
<p><label>Enter your directions for the matching exercise: <input id="matching" type="text" size="50" /></label></p>
<p>Entries in the left column will stay in the order entered; matches in the right column will be shuffled. (You do not have to use all six.)</p>
<label>Choice 1. <input id="choice1" name="choice" type="text" size="40" /></label> = <label>Match 1. <input id="match1" name="match" type="text" size="40" /></label> <br /><br />
<label>Choice 2. <input id="choice2" name="choice" type="text" size="40" /></label> = <label>Match 2. <input id="match2" name="match" type="text" size="40" /></label> <br /><br />
<label>Choice 3. <input id="choice3" name="choice" type="text" size="40" /></label> = <label>Match 3. <input id="match3" name="match" type="text" size="40" /></label> <br /><br />
<label>Choice 4. <input id="choice4" name="choice" type="text" size="40" /></label> = <label>Match 4. <input id="match4" name="match" type="text" size="40" /></label> <br /><br />
<label>Choice 5. <input id="choice5" name="choice" type="text" size="40" /></label> = <label>Match 5. <input id="match5" name="match" type="text" size="40" /></label> <br /><br />
<label>Choice 6. <input id="choice6" name="choice" type="text" size="40" /></label> = <label>Match 6. <input id="match6" name="match" type="text" size="40" /></label> <br /><br />
</fieldset>
<p><button class="btn btn-success" onclick="createCodeMA()">Create Code</button> <button id="clearQ" class="btn btn-danger" onclick="clearQuestionMA()">Clear Question</button></p>
<p>Code will generate below:</p>
<p id="generateMA" style="user-select: all;" class="bg-light"></p>
<button id="copied" class="btn btn-success" onclick="copyCodeMA('generateMA')">Copy Code</button> <button id="clear" class="btn btn-danger" onclick="clearCodeMA('generateMA')">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 Code above to clear out/uncheck 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>
function createCodeMA()
{
// throw alert if answers 1 and 2 are empty
if (document.getElementById("choice1").value == "" && document.getElementById("choice2").value == "" && document.getElementById("match1").value == "" && document.getElementById("match2").value == "") {
window.alert("Please enter text for at least choices and matches 1 & 2.")
} else {
// set color palette
var colorPalette = ["#B81414", "#AB5D03", "#6E7002", "#02701E", "#144BB8", "#2B0270"];
// directions paragraph
var theDirections = document.getElementById("matching").value;
document.getElementById("generateMA").insertAdjacentHTML('beforeend', '<pre><fieldset><legend>' + theDirections + '</legend> <div class="container"> <div class="row"> <div class="col-sm-6"><p>Choices:</p></pre>');
// left column
var theChoices = document.getElementsByName("choice");
for (var i = 0; i < theChoices.length; i++) {
var answerChoice = theChoices[i].value;
if (answerChoice !== null && answerChoice !== '')
{
document.getElementById("generateMA").insertAdjacentHTML('beforeend', '<pre><input type="button" class="btn btn-light btn-block" value="' + answerChoice + '" onclick="this.value=\'' + (i + 1) + ". " + answerChoice + '\'; this.style.backgroundColor=\'' + colorPalette[i] + '\'; this.style.color=\'white\';"></pre>');
}
else
{
break;
}
} //end of for loop for left column
document.getElementById("generateMA").insertAdjacentHTML('beforeend', '<pre></div><div class="col-sm-6"><p>Matches:</p></pre>');
// right column
var allMatches = [];
var theMatches = document.getElementsByName("match");
for (var i = 0; i < theMatches.length; i++) {
if (theMatches[i].value !== null && theMatches[i].value !== '') {
allMatches.push(theMatches[i].value);
}
} // end of for loop for right column
// shuffle array elements
do {
var shuffledArray = d3.shuffle(allMatches.slice());
} while (JSON.stringify(shuffledArray) === JSON.stringify(allMatches));
// display buttons from shuffled array
for (var i = 0; i < allMatches.length; i++) {
document.getElementById("generateMA").insertAdjacentHTML('beforeend', '<pre><input type="button" class="btn btn-light btn-block" value="' + shuffledArray[i] + '" onclick="this.style.backgroundColor=\'' + colorPalette[allMatches.indexOf(shuffledArray[i])] + '\'; this.style.color=\'white\'; this.value=\'' + (allMatches.indexOf(shuffledArray[i]) + 1) + ". " + shuffledArray[i] + '\';"></pre>');
} // end of for loop to display buttons from shuffled array
document.getElementById("generateMA").insertAdjacentHTML('beforeend', '<pre></div></div></div></fieldset></pre>');
} // end of check for empty 1 & 2 boxes
} // end of createCode function
function copyCodeMA(id)
{
var r = document.createRange();
r.selectNode(document.getElementById(id));
window.getSelection().removeAllRanges();
window.getSelection().addRange(r);
document.execCommand('copy');
window.getSelection().removeAllRanges();
}
function clearCodeMA(id)
{
document.getElementById(id).innerHTML = "";
}
function clearQuestionMA()
{
document.getElementById("matching").value = "";
for (var i = 0; i < document.getElementsByName("choice").length; i++) {
document.getElementsByName("choice")[i].value = "";
document.getElementsByName("match")[i].value = "";
}
}
/* Tooltips */
$(document).ready(function() {
$('#copied').tooltip({ title: "Code Copied!", trigger: "click", placement: "bottom" });
});
$('#clear').click(function() {
$('#copied').tooltip('hide');
});
</script>
</body>
</html>