-
Notifications
You must be signed in to change notification settings - Fork 2
/
short-answer.html
128 lines (121 loc) · 6.8 KB
/
short-answer.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 createCode()
{
// throw alert if answer box is empty
if (document.getElementById("correct").value == "") {
window.alert("Please enter at least one correct answer for your short answer question.")
} else {
qno = document.getElementById("number").value;
theQuestion = document.getElementById("question").value;
correctAnswer = document.getElementById("correct").value.toLowerCase();
additionalAnswer = document.getElementById("additional").value.toLowerCase();
document.getElementById("generate").insertAdjacentHTML('beforeend', '<pre><fieldset><legend>' + theQuestion + '</legend> <input id="answer' + qno + '" type="text" size="30" aria-label="Answer"><button class="btn btn-dark" onclick="checkSA' + qno + '()">Check Answer</button> <div id="result' + qno + '" role="alert"> <p>Feedback will show here.</p> </div> <script> var SAclicks' + qno + ' = 0; function checkSA' + qno + '() { SAclicks' + qno + ' += 1; var guess; guess = document.getElementById("answer' + qno + '").value.toLowerCase();if (guess == "' + correctAnswer + '"</pre>');
if (additionalAnswer !== "")
{ document.getElementById("generate").insertAdjacentHTML('beforeend', '<pre>|| guess == "' + additionalAnswer + '"</pre>'); }
document.getElementById("generate").insertAdjacentHTML('beforeend', '<pre>) {var green = document.createElement("strong"); green.style.color = "green"; green.innerHTML = "Attempt " + SAclicks' + qno + ' + ": Correct!"; var element = document.getElementById("result' + qno + '").children[0]; element.replaceChild(green, element.childNodes[0]); } else { var red = document.createElement("strong"); red.style.color = "#dc143c"; red.innerHTML = "Attempt " + SAclicks' + qno + ' + ": Incorrect! Try again!"; var element = document.getElementById("result' + qno + '").children[0]; element.replaceChild(red, element.childNodes[0]); } } </script> </fieldset></pre>');
} // end of check for empty box
} // 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("number").value = "";
document.getElementById("question").value = "";
document.getElementById("correct").value = "";
document.getElementById("additional").value = "";
}
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-10 offset-sm-1">
<h1>Create Code for Short Answer or Fill in the Blank Questions</h1>
<h2>Sample Short Answer Question</h2>
<fieldset><legend><label for="answer">What is the most popular pet?</label></legend>
<input id="answer" type="text" size="30" aria-label="Answer"> <button class="btn btn-dark" onclick="checkSA()">Check Answer</button>
<div id="result" role="alert"><p>Feedback will show here.</p></div>
<script>
var SAclicks = 0;
function checkSA() {
SAclicks += 1;
var guess, feedback;
guess = document.getElementById("answer").value.toLowerCase();
if (guess == "dog" || guess == "DOG")
{
const green = document.createElement("strong");
green.style.color = "green";
green.innerHTML = "Attempt " + SAclicks + ": Correct!";
var element = document.getElementById("result").children[0];
element.replaceChild(green, element.childNodes[0]);
}
else
{
const red = document.createElement("strong");
red.style.color = "#dc143c";
red.innerHTML = "Attempt " + SAclicks + ": Incorrect! Try again!";
var element = document.getElementById("result").children[0];
element.replaceChild(red, element.childNodes[0]);
}
}
</script>
<hr />
<h2>Create Your Own Question:</h2>
<p>Enter the question number and the correct answer below as well as an additional correct answer, if needed. For example, this can account for spelling variations (color and colour) or numbers as words and digits (ten and 10). Your text will be changed to lowercase so the answers will be case insensitive. You only need to enter the question number if you are inserting more than one short answer question per page. Required fields are marked with an asterisk (*).</p>
<fieldset><legend>Short Answer Question</legend>
<p><label>Enter the question number. <input id="number" type="text" size="5" /> (Leave blank if you only need one short answer question per page)</label></p>
<p><label>Enter the short answer question. * <input id="question" type="text" size="50" required/></label></p>
<p><label>Enter the correct answer. * <input id="correct" type="text" size="40" required/></label></p>
<p><label>Enter an additional correct answer: <input id="additional" type="text" size="40" /> (not required)</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>