Skip to content
This repository was archived by the owner on Jun 7, 2023. It is now read-only.

Commit 5b252f3

Browse files
vqumvqum
committed
add labels option
1 parent 6d3ce86 commit 5b252f3

1 file changed

Lines changed: 41 additions & 31 deletions

File tree

‎runestone/selectquestion/js/selectone.js‎

Lines changed: 41 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,12 @@ export default class SelectOne extends RunestoneBase {
126126
self.realComponent.selectorId = selectorId;
127127
} else {
128128
if (data.toggle) {
129+
var toggleOptions = data.toggleOptions;
130+
var toggleLabels;
131+
if (toggleOptions.includes("labels{")) {
132+
toggleLabels = toggleOptions.slice(toggleOptions.indexOf("labels{") + 7, toggleOptions.indexOf("}")).split(",");
133+
toggleOptions = toggleOptions.slice(0, toggleOptions.indexOf(",labels{"));
134+
}
129135
var toggleQuestions = this.questions.split(", ");
130136
var toggleUI = "";
131137
// check so that only the first toggle select question on the assignments page has a preview panel created, then all toggle select previews use this same panel
@@ -147,6 +153,7 @@ export default class SelectOne extends RunestoneBase {
147153
var toggleQuestionHTMLSrc;
148154
var toggleQuestionSubstring;
149155
var toggleQuestionType;
156+
var toggleQuestionTypes = [];
150157
for (i = 0; i < toggleQuestions.length; i++) {
151158
toggleQuestionHTMLSrc = await this.getToggleSrc(
152159
toggleQuestions[i]
@@ -155,13 +162,13 @@ export default class SelectOne extends RunestoneBase {
155162
'data-component="'
156163
)[1];
157164
switch (
158-
toggleQuestionSubstring.substring(
165+
toggleQuestionSubstring.slice(
159166
0,
160167
toggleQuestionSubstring.indexOf('"')
161168
)
162169
) {
163170
case "activecode":
164-
toggleQuestionType = "Write Code";
171+
toggleQuestionType = "Active Write Code";
165172
break;
166173
case "clickablearea":
167174
toggleQuestionType = "Clickable Area";
@@ -176,20 +183,26 @@ export default class SelectOne extends RunestoneBase {
176183
toggleQuestionType = "Multiple Choice";
177184
break;
178185
case "parsons":
179-
toggleQuestionType = "Mixed-Up Code";
186+
toggleQuestionType = "Parsons Mixed-Up Code";
180187
break;
181188
case "shortanswer":
182189
toggleQuestionType = "Short Answer";
183190
break;
184191
}
192+
toggleQuestionTypes[i] = toggleQuestionType;
185193
toggleUI +=
186194
'<option value="' +
187195
toggleQuestions[i] +
188-
'">' +
189-
toggleQuestionType +
196+
'">';
197+
if (toggleLabels[i]) {
198+
toggleUI += toggleLabels[i];
199+
}
200+
else {
201+
toggleUI += toggleQuestionType +
190202
" - " +
191203
toggleQuestions[i];
192-
if ((i == 0) && (data.toggleOptions.includes("lock"))) {
204+
}
205+
if ((i == 0) && (toggleOptions.includes("lock"))) {
193206
toggleUI += " (only this question will be graded)";
194207
}
195208
toggleUI += "</option>";
@@ -221,6 +234,10 @@ export default class SelectOne extends RunestoneBase {
221234
"toggle_current",
222235
toggleFirstID
223236
);
237+
$("#" + selectorId).data(
238+
"toggle_current_type",
239+
toggleQuestionTypes[0]
240+
);
224241
break;
225242
}
226243
}
@@ -229,7 +246,8 @@ export default class SelectOne extends RunestoneBase {
229246
async function () {
230247
await this.togglePreview(
231248
toggleQuestionSelect.parentElement.id,
232-
data.toggleOptions
249+
toggleOptions,
250+
toggleQuestionTypes
233251
);
234252
}.bind(this)
235253
);
@@ -252,7 +270,7 @@ export default class SelectOne extends RunestoneBase {
252270
}
253271

254272
// on changing the value of toggle select dropdown, render selected question in preview panel, add appropriate buttons, then make preview panel visible
255-
async togglePreview(parentID, toggleOptions) {
273+
async togglePreview(parentID, toggleOptions, toggleQuestionTypes) {
256274
$("#toggle-buttons").html("");
257275
var parentDiv = document.getElementById(parentID);
258276
var toggleQuestionSelect = parentDiv.getElementsByTagName("select")[0];
@@ -285,33 +303,23 @@ export default class SelectOne extends RunestoneBase {
285303
$(setButton).addClass("btn btn-primary");
286304
$(setButton).click(
287305
async function () {
288-
await this.toggleSet(parentID, selectedQuestion, htmlsrc);
306+
await this.toggleSet(parentID, selectedQuestion, htmlsrc, toggleQuestionTypes);
289307
$("#component-preview").hide();
290308
}.bind(this)
291309
);
292310
$("#toggle-buttons").append(setButton);
293311

294312
// if "transfer" in toggle options, and if current question type is Parsons and selected question type is active code, then add "Transfer" button to preview panel
295313
if (toggleOptions.includes("transfer")) {
296-
var optionText;
297-
var currentType;
298-
var selectedType;
299-
for (var n = 0; n < toggleQuestionSelect.options.length; n++) {
300-
optionText = toggleQuestionSelect.options[n].innerHTML;
301-
if (optionText.includes($("#" + parentID).data("toggle_current"))) {
302-
currentType = optionText.substring(0, optionText.indexOf(" - "));
303-
}
304-
if (optionText.includes(selectedQuestion)) {
305-
selectedType = optionText.substring(0, optionText.indexOf(" - "));
306-
}
307-
}
308-
if ((currentType == "Mixed-Up Code") && (selectedType == "Write Code")) {
314+
var currentType = $("#" + parentID).data("toggle_current_type");
315+
var selectedType = toggleQuestionTypes[toggleQuestionSelect.selectedIndex];
316+
if ((currentType == "Parsons Mixed-Up Code") && (selectedType == "Active Write Code")) {
309317
let transferButton = document.createElement("button");
310-
$(transferButton).text("Transfer Mixed-Up Code to Write Code");
318+
$(transferButton).text("Transfer Parsons Mixed-Up Code to Active Write Code");
311319
$(transferButton).addClass("btn btn-primary");
312320
$(transferButton).click(
313321
async function () {
314-
await this.toggleTransfer(parentID, selectedQuestion, htmlsrc);
322+
await this.toggleTransfer(parentID, selectedQuestion, htmlsrc, toggleQuestionTypes);
315323
}.bind(this)
316324
);
317325
$("#toggle-buttons").append(transferButton);
@@ -323,8 +331,9 @@ export default class SelectOne extends RunestoneBase {
323331
}
324332

325333
// on clicking "Select this Problem" button, close preview panel, replace current question in assignments page with selected question, and send request to update grading database
326-
async toggleSet(parentID, selectedQuestion, htmlsrc) {
334+
async toggleSet(parentID, selectedQuestion, htmlsrc, toggleQuestionTypes) {
327335
var selectorId = parentID + "-toggleSelectedQuestion";
336+
var toggleQuestionSelect = document.getElementById(parentID).getElementsByTagName("select")[0];
328337
document.getElementById(selectorId).innerHTML = ""; // need to check whether this is even necessary
329338
let res = renderRunestoneComponent(htmlsrc, selectorId, {
330339
selector_id: selectorId,
@@ -340,10 +349,11 @@ export default class SelectOne extends RunestoneBase {
340349
let response = await fetch(request);
341350
$("#toggle-preview").html("");
342351
$("#" + parentID).data("toggle_current", selectedQuestion);
352+
$("#" + parentID).data("toggle_current_type", toggleQuestionTypes[toggleQuestionSelect.selectedIndex]);
343353
}
344354

345355
// on clicking "Transfer" button, extract the current text and indentation of the Parsons blocks in the answer space, then paste that into the selected active code question
346-
async toggleTransfer(parentID, selectedQuestion, htmlsrc) {
356+
async toggleTransfer(parentID, selectedQuestion, htmlsrc, toggleQuestionTypes) {
347357
// retrieve all Parsons lines within the answer space and loop through this list
348358
var currentParsons = document.getElementById(parentID + "-toggleSelectedQuestion").querySelectorAll("div[class^='answer']")[0].getElementsByClassName("prettyprint lang-py");
349359
var currentParsonsClass;
@@ -360,13 +370,13 @@ export default class SelectOne extends RunestoneBase {
360370
currentParsonsClass = currentParsons[p].classList[2];
361371
if (currentParsonsClass) {
362372
if (currentParsonsClass.includes("indent")) {
363-
indentCount = parseInt(indentCount) + parseInt(currentParsonsClass.substring(6,currentParsonsClass.length));
373+
indentCount = parseInt(indentCount) + parseInt(currentParsonsClass.slice(6,currentParsonsClass.length));
364374
}
365375
}
366376
// for Parsons answer spaces with vertical lines that allow student to define their own line indentation
367377
currentBlockIndent = currentParsons[p].parentElement.parentElement.style.left;
368378
if (currentBlockIndent) {
369-
indentCount = parseInt(indentCount) + parseInt(currentBlockIndent.substring(0,currentBlockIndent.indexOf("px")) / 30);
379+
indentCount = parseInt(indentCount) + parseInt(currentBlockIndent.slice(0,currentBlockIndent.indexOf("px")) / 30);
370380
}
371381
for (var d = 0; d < indentCount; d++) {
372382
indent += " ";
@@ -394,11 +404,11 @@ export default class SelectOne extends RunestoneBase {
394404
}
395405
}
396406
// replace all existing code within selected active code question with extracted Parsons text
397-
var htmlsrcFormer = htmlsrc.substring(0, htmlsrc.indexOf("<textarea") + htmlsrc.split("<textarea")[1].indexOf(">") + 10);
398-
var htmlsrcLatter = htmlsrc.substring(htmlsrc.indexOf("</textarea>"), htmlsrc.length);
407+
var htmlsrcFormer = htmlsrc.slice(0, htmlsrc.indexOf("<textarea") + htmlsrc.split("<textarea")[1].indexOf(">") + 10);
408+
var htmlsrcLatter = htmlsrc.slice(htmlsrc.indexOf("</textarea>"), htmlsrc.length);
399409
htmlsrc = htmlsrcFormer + parsonsLines + htmlsrcLatter;
400410

401-
await this.toggleSet(parentID, selectedQuestion, htmlsrc);
411+
await this.toggleSet(parentID, selectedQuestion, htmlsrc, toggleQuestionTypes);
402412
$("#component-preview").hide();
403413
}
404414
}

0 commit comments

Comments
 (0)