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

Commit c6715d9

Browse files
bnmnetpbnmnetp
committed
Update: Log preview and select on toggle quesitons
1 parent ff86c50 commit c6715d9

File tree

1 file changed

+124
-56
lines changed

1 file changed

+124
-56
lines changed

‎runestone/selectquestion/js/selectone.js‎

Lines changed: 124 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default class SelectOne extends RunestoneBase {
4141
this.ABExperiment = $(opts.orig).data("ab");
4242
this.toggleOptions = $(opts.orig).data("toggleoptions");
4343
this.toggleLabels = $(opts.orig).data("togglelabels");
44-
this.limitBaseCourse = $(opts.orig).data("limit-basecourse")
44+
this.limitBaseCourse = $(opts.orig).data("limit-basecourse");
4545
opts.orig.id = this.selector_id;
4646
}
4747
/**
@@ -95,11 +95,14 @@ export default class SelectOne extends RunestoneBase {
9595
let opts = this.origOpts;
9696
let selectorId = this.selector_id;
9797
console.log("getting question source");
98-
let request = new Request(`${eBookConfig.new_server_prefix}/assessment/get_question_source`, {
99-
method: "POST",
100-
headers: this.jsonHeaders,
101-
body: JSON.stringify(data),
102-
});
98+
let request = new Request(
99+
`${eBookConfig.new_server_prefix}/assessment/get_question_source`,
100+
{
101+
method: "POST",
102+
headers: this.jsonHeaders,
103+
body: JSON.stringify(data),
104+
}
105+
);
103106
let response = await fetch(request);
104107
let htmlsrc = await response.json();
105108
htmlsrc = htmlsrc.detail;
@@ -131,7 +134,9 @@ export default class SelectOne extends RunestoneBase {
131134
self.realComponent.selectorId = selectorId;
132135
} else {
133136
if (data.toggleOptions) {
134-
var toggleLabels = data.toggleLabels.replace("togglelabels:", "").trim();
137+
var toggleLabels = data.toggleLabels
138+
.replace("togglelabels:", "")
139+
.trim();
135140
if (toggleLabels) {
136141
toggleLabels = toggleLabels.split(",");
137142
for (var t = 0; t < toggleLabels.length; t++) {
@@ -146,7 +151,7 @@ export default class SelectOne extends RunestoneBase {
146151
'<div id="component-preview" class="col-md-6 toggle-preview" style="z-index: 999;">' +
147152
'<div id="toggle-buttons"></div>' +
148153
'<div id="toggle-preview"></div>' +
149-
'</div>';
154+
"</div>";
150155
}
151156
// dropdown menu containing the question options
152157
toggleUI +=
@@ -164,14 +169,13 @@ export default class SelectOne extends RunestoneBase {
164169
toggleQuestionHTMLSrc = await this.getToggleSrc(
165170
toggleQuestions[i]
166171
);
167-
toggleQuestionSubstring = toggleQuestionHTMLSrc.split(
168-
'data-component="'
169-
)[1];
172+
toggleQuestionSubstring =
173+
toggleQuestionHTMLSrc.split('data-component="')[1];
170174
switch (
171-
toggleQuestionSubstring.slice(
172-
0,
173-
toggleQuestionSubstring.indexOf('"')
174-
)
175+
toggleQuestionSubstring.slice(
176+
0,
177+
toggleQuestionSubstring.indexOf('"')
178+
)
175179
) {
176180
case "activecode":
177181
toggleQuestionType = "Active Write Code";
@@ -196,26 +200,19 @@ export default class SelectOne extends RunestoneBase {
196200
break;
197201
}
198202
toggleQuestionTypes[i] = toggleQuestionType;
199-
toggleUI +=
200-
'<option value="' +
201-
toggleQuestions[i] +
202-
'">';
203+
toggleUI += '<option value="' + toggleQuestions[i] + '">';
203204
if (toggleLabels) {
204205
if (toggleLabels[i]) {
205206
toggleUI += toggleLabels[i];
207+
} else {
208+
toggleUI +=
209+
toggleQuestionType + " - " + toggleQuestions[i];
206210
}
207-
else {
208-
toggleUI += toggleQuestionType +
209-
" - " +
210-
toggleQuestions[i];
211-
}
212-
}
213-
else {
214-
toggleUI += toggleQuestionType +
215-
" - " +
216-
toggleQuestions[i];
211+
} else {
212+
toggleUI +=
213+
toggleQuestionType + " - " + toggleQuestions[i];
217214
}
218-
if ((i == 0) && (data.toggleOptions.includes("lock"))) {
215+
if (i == 0 && data.toggleOptions.includes("lock")) {
219216
toggleUI += " (only this question will be graded)";
220217
}
221218
toggleUI += "</option>";
@@ -262,6 +259,11 @@ export default class SelectOne extends RunestoneBase {
262259
data.toggleOptions,
263260
toggleQuestionTypes
264261
);
262+
this.logBookEvent({
263+
event: "view_toggle",
264+
act: toggleQuestionSelect.value,
265+
div_id: toggleQuestionSelect.parentElement.id,
266+
});
265267
}.bind(this)
266268
);
267269
}
@@ -311,29 +313,48 @@ export default class SelectOne extends RunestoneBase {
311313
$("#toggle-buttons").append(closeButton);
312314

313315
// if "lock" is not in toggle options, then allow adding more buttons to the preview panel
314-
if (!(toggleOptions.includes("lock"))) {
316+
if (!toggleOptions.includes("lock")) {
315317
let setButton = document.createElement("button");
316318
$(setButton).text("Select this Problem");
317319
$(setButton).addClass("btn btn-primary");
318320
$(setButton).click(
319321
async function () {
320-
await this.toggleSet(parentID, selectedQuestion, htmlsrc, toggleQuestionTypes);
322+
await this.toggleSet(
323+
parentID,
324+
selectedQuestion,
325+
htmlsrc,
326+
toggleQuestionTypes
327+
);
321328
$("#component-preview").hide();
329+
this.logBookEvent({
330+
event: "select_toggle",
331+
act: selectedQuestion,
332+
div_id: parentID,
333+
});
322334
}.bind(this)
323335
);
324336
$("#toggle-buttons").append(setButton);
325337

326338
// 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
327339
if (toggleOptions.includes("transfer")) {
328340
var currentType = $("#" + parentID).data("toggle_current_type");
329-
var selectedType = toggleQuestionTypes[toggleQuestionSelect.selectedIndex];
330-
if ((currentType == "Parsons Mixed-Up Code") && (selectedType == "Active Write Code")) {
341+
var selectedType =
342+
toggleQuestionTypes[toggleQuestionSelect.selectedIndex];
343+
if (
344+
currentType == "Parsons Mixed-Up Code" &&
345+
selectedType == "Active Write Code"
346+
) {
331347
let transferButton = document.createElement("button");
332348
$(transferButton).text("Transfer Response");
333349
$(transferButton).addClass("btn btn-primary");
334350
$(transferButton).click(
335351
async function () {
336-
await this.toggleTransfer(parentID, selectedQuestion, htmlsrc, toggleQuestionTypes);
352+
await this.toggleTransfer(
353+
parentID,
354+
selectedQuestion,
355+
htmlsrc,
356+
toggleQuestionTypes
357+
);
337358
}.bind(this)
338359
);
339360
$("#toggle-buttons").append(transferButton);
@@ -348,7 +369,9 @@ export default class SelectOne extends RunestoneBase {
348369
// _ `toggleSet`
349370
async toggleSet(parentID, selectedQuestion, htmlsrc, toggleQuestionTypes) {
350371
var selectorId = parentID + "-toggleSelectedQuestion";
351-
var toggleQuestionSelect = document.getElementById(parentID).getElementsByTagName("select")[0];
372+
var toggleQuestionSelect = document
373+
.getElementById(parentID)
374+
.getElementsByTagName("select")[0];
352375
document.getElementById(selectorId).innerHTML = ""; // need to check whether this is even necessary
353376
await renderRunestoneComponent(htmlsrc, selectorId, {
354377
selector_id: selectorId,
@@ -361,16 +384,27 @@ export default class SelectOne extends RunestoneBase {
361384
await fetch(request);
362385
$("#toggle-preview").html("");
363386
$("#" + parentID).data("toggle_current", selectedQuestion);
364-
$("#" + parentID).data("toggle_current_type", toggleQuestionTypes[toggleQuestionSelect.selectedIndex]);
387+
$("#" + parentID).data(
388+
"toggle_current_type",
389+
toggleQuestionTypes[toggleQuestionSelect.selectedIndex]
390+
);
365391
}
366392

367393
// 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
368-
async toggleTransfer(parentID, selectedQuestion, htmlsrc, toggleQuestionTypes) {
394+
async toggleTransfer(
395+
parentID,
396+
selectedQuestion,
397+
htmlsrc,
398+
toggleQuestionTypes
399+
) {
369400
// retrieve all Parsons lines within the answer space and loop through this list
370-
var currentParsons = document.getElementById(parentID + "-toggleSelectedQuestion").querySelectorAll("div[class^='answer']")[0].getElementsByClassName("prettyprint lang-py");
401+
var currentParsons = document
402+
.getElementById(parentID + "-toggleSelectedQuestion")
403+
.querySelectorAll("div[class^='answer']")[0]
404+
.getElementsByClassName("prettyprint lang-py");
371405
var currentParsonsClass;
372406
var currentBlockIndent;
373-
var indentCount
407+
var indentCount;
374408
var indent;
375409
var parsonsLine;
376410
var parsonsLines = ``;
@@ -382,13 +416,28 @@ export default class SelectOne extends RunestoneBase {
382416
currentParsonsClass = currentParsons[p].classList[2];
383417
if (currentParsonsClass) {
384418
if (currentParsonsClass.includes("indent")) {
385-
indentCount = parseInt(indentCount) + parseInt(currentParsonsClass.slice(6, currentParsonsClass.length));
419+
indentCount =
420+
parseInt(indentCount) +
421+
parseInt(
422+
currentParsonsClass.slice(
423+
6,
424+
currentParsonsClass.length
425+
)
426+
);
386427
}
387428
}
388429
// for Parsons answer spaces with vertical lines that allow student to define their own line indentation
389-
currentBlockIndent = currentParsons[p].parentElement.parentElement.style.left;
430+
currentBlockIndent =
431+
currentParsons[p].parentElement.parentElement.style.left;
390432
if (currentBlockIndent) {
391-
indentCount = parseInt(indentCount) + parseInt(currentBlockIndent.slice(0, currentBlockIndent.indexOf("px")) / 30);
433+
indentCount =
434+
parseInt(indentCount) +
435+
parseInt(
436+
currentBlockIndent.slice(
437+
0,
438+
currentBlockIndent.indexOf("px")
439+
) / 30
440+
);
392441
}
393442
for (var d = 0; d < indentCount; d++) {
394443
indent += " ";
@@ -397,35 +446,54 @@ export default class SelectOne extends RunestoneBase {
397446
parsonsLine = currentParsons[p].getElementsByTagName("span");
398447
count = 0;
399448
for (var l = 0; l < parsonsLine.length; l++) {
400-
if (parsonsLine[l].childNodes[0].nodeName == "#text") { // Parsons blocks have differing amounts of hierarchy levels (spans within spans)
401-
if ((p == 0) && (count == 0)) { // need different check than l == 0 because the l numbering doesn't align with location within line due to inconsistent span heirarchy
449+
if (parsonsLine[l].childNodes[0].nodeName == "#text") {
450+
// Parsons blocks have differing amounts of hierarchy levels (spans within spans)
451+
if (p == 0 && count == 0) {
452+
// need different check than l == 0 because the l numbering doesn't align with location within line due to inconsistent span heirarchy
402453
parsonsLines += indent + parsonsLine[l].innerHTML;
403454
count++;
404-
}
405-
else if (count != 0) {
455+
} else if (count != 0) {
406456
parsonsLines += parsonsLine[l].innerHTML;
407457
count++;
408-
}
409-
else {
410-
parsonsLines = parsonsLines + `
411-
` + indent + parsonsLine[l].innerHTML;
412-
parsonsLines = parsonsLines.replace(" ", "");
458+
} else {
459+
parsonsLines =
460+
parsonsLines +
461+
`
462+
` +
463+
indent +
464+
parsonsLine[l].innerHTML;
465+
parsonsLines = parsonsLines.replace(
466+
" ",
467+
""
468+
);
413469
count++;
414470
}
415471
}
416472
}
417473
}
418474
// replace all existing code within selected active code question with extracted Parsons text
419-
var htmlsrcFormer = htmlsrc.slice(0, htmlsrc.indexOf("<textarea") + htmlsrc.split("<textarea")[1].indexOf(">") + 10);
420-
var htmlsrcLatter = htmlsrc.slice(htmlsrc.indexOf("</textarea>"), htmlsrc.length);
475+
var htmlsrcFormer = htmlsrc.slice(
476+
0,
477+
htmlsrc.indexOf("<textarea") +
478+
htmlsrc.split("<textarea")[1].indexOf(">") +
479+
10
480+
);
481+
var htmlsrcLatter = htmlsrc.slice(
482+
htmlsrc.indexOf("</textarea>"),
483+
htmlsrc.length
484+
);
421485
htmlsrc = htmlsrcFormer + parsonsLines + htmlsrcLatter;
422486

423-
await this.toggleSet(parentID, selectedQuestion, htmlsrc, toggleQuestionTypes);
487+
await this.toggleSet(
488+
parentID,
489+
selectedQuestion,
490+
htmlsrc,
491+
toggleQuestionTypes
492+
);
424493
$("#component-preview").hide();
425494
}
426495
}
427496

428-
429497
if (typeof window.component_factory === "undefined") {
430498
window.component_factory = {};
431499
}

0 commit comments

Comments
 (0)