-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·239 lines (194 loc) · 8.68 KB
/
index.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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Cloze Builder</title>
<link href='https://fonts.googleapis.com/css?family=Space Mono' rel='stylesheet'>
<link href="style.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.min.js"></script>
<script src="js/FileSaver.js"></script>
<script type="text/javascript">
function buildCloze(){
input_text = document.getElementById('input_text').value;
output_box = document.getElementById('output_code');
output_text = output_box.value;
var input_lines = input_text.split('\n');
var title = input_lines[0] + '\n';
// regex to get stuff between []
let regexp = /\[.+\]/g;
var all_sentences = '';
var all_answers = ' var certas = [';
for(var j = 1; j < input_lines.length;j++){
this_sentence = input_lines[j];
// get the answers, which are between []
let array_answers = [...this_sentence.matchAll(regexp)];
for(var k = 0; k < array_answers.length;k++){
this_answer = array_answers[k];
//this_answer = this_answer.replace(/\[/g, '["');
this_answer_line = '' + this_answer;
this_answer_line = this_answer_line.replace(/\[/g, '["');
this_answer_line = this_answer_line.replace(/\]/g, '"]');
this_answer_line = this_answer_line.replace(/,\s?/g, '","');
this_answer_line = this_answer_line.replace(/\]\s+?\[/g, '], [');
all_answers += this_answer_line + ', ';
}
new_sentence = this_sentence.replace(regexp, '')
new_sentence = new_sentence.replace(/_+/g, '<input type="text">')
// get only the sentence without the answers
all_sentences += ' <div>' + new_sentence + '</div>\n';
}
all_answers = all_answers.substring(0,all_answers.length-2) + '];\n'
var lines = output_text.split('\n');
new_lines = ''
for(var i = 0; i < lines.length;i++){
this_line = lines[i];
if (this_line.includes('TITLE HERE')) {
new_lines += title;
} else if (this_line.includes('SENTENCES HERE')) {
new_lines += all_sentences;
} else if (this_line.includes('ANSWERS HERE')) {
new_lines += all_answers;
} else {
new_lines += this_line + '\n';
}
}
output_box.innerHTML = new_lines;
}
function copyCode() {
/* Get the text field */
var copyText = document.getElementById('output_code');
copyText.value = copyText.value.replace(/text\/htmlpreview/g, 'text/javascript')
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /*For mobile devices*/
/* Copy the text inside the text field */
document.execCommand('copy');
/* Alert the copied text */
alert('Copied the text to clipboard');
}
function downloadHTML() {
var content = document.getElementById('output_code').value;
content = content.replace(/text\/htmlpreview/g, 'text/javascript')
var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
var newfilename = 'cloze_output.html';
saveAs(blob, newfilename);
}
</script>
</head>
<body onload="buildCloze();">
<div id="top_bar" class="top_bar">
<table width="100%">
<tr>
<td><h2>Cloze Builder </h2></td>
<td><div id="cit_info"></div></td>
<td><a href="#" class="button" onclick="location.reload();">Clear Builder</a></td>
</tr>
</table>
</div>
<div id="text_window" class="text_window">
<h3>Edit this side to customize your cloze exercise</h3>
<p>First line is always the title. Use underscore (__) for text entry.
Possible answers for each blank (i.e., ____) go between square brackets (i.e., [word1, word2])</p>
<p>Click the "Build Exercise!" button to update the code on the right.</p>
<form>
<textarea id="input_text" rows="35" cols="88">
Complete as frases abaixo com os tempos adequados do SUBJUNTIVO (presente, imperfeito ou futuro):
1. Vamos comprar um colchão novo quando _____________ (ter) dinheiro. [tivermos]
2. É aconselhável que as pessoas _______________ (beber) muito líquido durante o verão. [bebam]
3. Foi importante que Rodney King ____________ (dar) uma entrevista na televisão na sexta-feira passada. [desse]
4. Talvez amanhã ________ (fazer) bom tempo. [faça]
5. Esperaria na fila a fim de que _______________ (poder) comprar um ingresso para o show se ___________ (ter) paciência. [pudesse] [tivesse]
6. Vou almoçar assim que eles ___________ (chegar) em casa. [chegarem]
7. Nós sugerimos ontem que a Júlia _____________ (pôr) parte do seu salário na poupança. [pusesse]
8. Mesmo que não __________ (passar) no teste final, o Jorge não repetirá esta matéria. [passe]
9. Eles jantarão fora hoje se _________________ (conseguir) uma babá. [conseguirem]
10. Ela espera que o namorado lhe _______ (trazer) uma lembrança de Paris. [traga]
11. Eu desejava que os testes de português ___________ (ser) mais difíceis. [fossem]
12. O Pedro vai acampar nas montanhas no próximo fim de semana a não ser que _____ (chover). [chova]
13. Ela lavará a roupa depois que ___________ (pôr) a mesa. [por, pôr]
14. Saímos na sexta passada embora ______ (haver) um toque de recolhida imposto pelas autoridades locais em Berkeley. [houvesse]
15. Temos desejado que as pessoas de diferentes raças ______ (poder) entender-se melhor. [possam]
16. Tinha sugerido a Marta que _____ (ficar) em casa comigo quando os seus amigos telefonaram e convidaram-na para sair. [ficasse]
</textarea>
</form>
</div>
<div id="info_box" class="info_box">
<h3>The HTML code for your cloze exercise will display here</h3>
<p>Click the button copy below to copy these contents and paste contents on a html editor on your course management system.</p>
<p>Click the download button to save this as a standalone html file.</p>
<form>
<textarea id="output_code" rows="35" cols="88" readonly>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
ANSWERS HERE
function corrija(){
var respostas1 = new Array();
var respostas2 = new Array();
var formulario = document.getElementById("myForm");
var quantos = formulario.elements.length - 1;
var e = document.getElementById("resultado");
var corretas = 0;
var comprimento = 0;
var achouCerta = false;
e.innerHTML = "";
for (var i = 0; i < quantos; i++) {
comprimento = certas[i].length;
var valor = formulario.elements[i].value.toLowerCase();
valor = valor.replace(/(\w)\s+(\w)/g, '$1_$2');
valor = valor.replace(/\s+/g, '');
respostas2.push(valor);
achouCerta = false;
for (var j = 0; j < comprimento; j++) {
if (!achouCerta) {
if (valor == certas[i][j]){
corretas = corretas +1;
achouCerta = true;
}
}
}
respostas1.push(achouCerta);
}
for (var i = 0; i < quantos; i++) {
var pai = formulario.elements[i].parentNode;
if (respostas1[i] == true) {
formulario.elements[i].style.backgroundColor="#90EE90";
formulario.elements[i].disabled = true;
}
else {
formulario.elements[i].style.backgroundColor="#FFC0CB"
}
}
for (var i = 0; i < quantos; i++) {
formulario.elements[i].value = respostas2[i].replace(/_/g, ' ');
}
e.innerHTML = "Correct Answers: " + corretas + ". Total: " + quantos + ". Score: " + ((corretas/quantos).toPrecision(2)*100) + "%";
}
</script>
</head>
<body>
<h2>
TITLE HERE
</h2>
<form id="myForm">
SENTENCES HERE
<div id="resultado"></div>
<br><input type=button value="Check Your Answers" onclick="corrija()">
</form>
</body>
</html>
</textarea>
</form>
</div>
<div id="bottom_bar" class="bottom_bar">
<form>
<a href="#" class="button" onclick="buildCloze();return false;">Build Exercise!</a>
<a href="#" class="button" onclick="copyCode();return false;">Copy Code</a>
<a href="#" class="button" onclick="downloadHTML();return false;">Download HTML</a>
</form>
</div>
</body>
</html>