-
Notifications
You must be signed in to change notification settings - Fork 1
/
multiple-choice.html
128 lines (115 loc) · 6.83 KB
/
multiple-choice.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
<!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>
function createCodeMC() {
// throw alert if answer box is empty
if (document.getElementById("choice1").value == "") {
window.alert("Please enter at least one answer choice for your multiple choice question.")
} else {
var theQuestion = document.getElementById("MCquestion").value;
document.getElementById("generateMC").insertAdjacentHTML('beforeend', '<pre><fieldset><legend>' + theQuestion + '</legend></pre>');
var theChoices = document.getElementsByName("choice");
var theChecks = document.getElementsByName("checkbox");
for (var i = 0; i < theChoices.length; i++) {
var answerChoice = theChoices[i].value;
answerChoice = answerChoice.replace(/"/g, '″'); // replace double straight quotes with double prime quotes
var choiceClick = answerChoice.replace(/'/g, "\\'"); // escape apostrophe (or straight single quote) for onclick only
if (answerChoice !== null && answerChoice !== '') {
if (theChecks[i].checked == true) {
document.getElementById("generateMC").insertAdjacentHTML('beforeend', '<pre><input type="button" class="btn btn-light btn-block" value="' + answerChoice + '" onclick="this.style.backgroundColor=\'green\'; this.style.color=\'white\'; this.value=\'Correct: ' + choiceClick + '\';"></pre>');
}
else {
document.getElementById("generateMC").insertAdjacentHTML('beforeend', '<pre><input type="button" class="btn btn-light btn-block" value="' + answerChoice + '" onclick="this.style.backgroundColor=\'#dc143c\'; this.style.color=\'white\'; this.value=\'Incorrect: ' + choiceClick + '\';"></pre>');
}
}
else {
break;
}
}
document.getElementById("generateMC").insertAdjacentHTML('beforeend', '<pre></fieldset></pre>');
} // end of check for empty box
} // end of createCode function
function copyCodeMC(id) {
var r = document.createRange();
r.selectNode(document.getElementById(id));
window.getSelection().removeAllRanges();
window.getSelection().addRange(r);
document.execCommand('copy');
window.getSelection().removeAllRanges();
}
function clearCodeMC(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("MCquestion").value = "";
for (var i = 0; i < document.getElementsByName("choice").length; i++) {
document.getElementsByName("choice")[i].value = "";
document.getElementsByName("checkbox")[i].checked = false;
}
}
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-10 offset-sm-1">
<h1>Create Code for Multiple Choice or True/False Questions</h1>
<h2>Sample Multiple Choice Question</h2>
<fieldset>
<legend>What is the capital of Michigan?</legend>
<input type="button" class="btn btn-light btn-block" value="Detroit" onclick="this.value='Incorrect: Detroit'; this.style.backgroundColor = '#dc143c'; this.style.color = 'white'" />
<input type="button" class="btn btn-light btn-block" value="Lansing" onclick="this.value='Correct: Lansing'; this.style.backgroundColor = 'green'; this.style.color = 'white'" />
<input type="button" class="btn btn-light btn-block" value="Ann Arbor" onclick="this.value='Incorrect: Ann Arbor'; this.style.backgroundColor = '#dc143c'; this.style.color = 'white'" />
<input type="button" class="btn btn-light btn-block" value="Grand Rapids" onclick="this.value='Incorrect: Grand Rapids'; this.style.backgroundColor = '#dc143c'; this.style.color = 'white'" />
</fieldset>
<hr>
<h2>Create Your Own Question:</h2>
<p>Required fields are marked with an asterisk (*).</p>
<fieldset><legend>Multiple Choice or True/False Question</legend>
<p><label>Enter the multiple choice or true/false question. * <input id="MCquestion" type="text" size="65" required/></label></p>
<p>Enter your answer choices and check the box(es) next to the correct answer(s). (You do not have to use all five.)</p>
<label>Choice 1. * <input id="choice1" name="choice" type="text" size="60" required/></label> <label>Check if 1 is correct: <input type="checkbox" name="checkbox" id="check1" /></label> <br /><br />
<label>2. <input id="choice2" name="choice" type="text" size="60" /></label> <label>Check if 2 is correct: <input type="checkbox" name="checkbox" id="check2" /></label> <br /><br />
<label>3. <input id="choice3" name="choice" type="text" size="60" /></label> <label>Check if 3 is correct: <input type="checkbox" name="checkbox" id="check3" /></label> <br /><br />
<label>4. <input id="choice4" name="choice" type="text" size="60" /></label> <label>Check if 4 is correct: <input type="checkbox" name="checkbox" id="check4" /></label> <br /><br />
<label>5. <input id="choice5" name="choice" type="text" size="60" /></label> <label>Check if 5 is correct: <input type="checkbox" name="checkbox" id="check5" /></label> <br /><br />
</fieldset>
<p><button class="btn btn-success" onclick="createCodeMC()">Create Code</button> <button id="clearQ" class="btn btn-danger" onclick="clearQuestion()">Clear Question</button></p>
<p>Code will generate below:</p>
<p id="generateMC" style="user-select: all;" class="bg-light"></p>
<button id="copied" class="btn btn-success" onclick="copyCodeMC('generateMC')">Copy Code</button> <button id="clear" class="btn btn-danger" onclick="clearCodeMC('generateMC')">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 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>