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

Updates and additional features for select toggle functionality #1189

Merged
bnmnetp merged 12 commits into from
Jun 10, 2021
Merged

Updates and additional features for select toggle functionality #1189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
de09b1e
updates and additional features for toggle select
vqum Apr 28, 2021
1797a8b
add comments to selectone.js
vqum Apr 28, 2021
6d3ce86
fix issue with buttons not resetting on preview panel
vqum Apr 28, 2021
286da09
Merge branch 'master' into master
bnmnetp Apr 28, 2021
5b252f3
add labels option
vqum May 11, 2021
041e989
Merge branch 'master' of https://github.com/vqum/RunestoneComponents …
vqum May 11, 2021
fe76001
switch split with replace so options following labels are included
vqum May 12, 2021
5d968b2
fix issue of error when not including labels in toggle options
vqum May 12, 2021
b2a8b90
handle spaces and trim excess spaces
vqum May 13, 2021
2678110
updates to select toggle syntax
vqum May 20, 2021
b235e8d
resolve conflict
vqum May 21, 2021
e328860
Merge branch 'master' into master
bnmnetp Jun 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
195 changes: 158 additions & 37 deletions runestone/selectquestion/js/selectone.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ export default class SelectOne extends RunestoneBase {
this.selector_id = $(opts.orig).first().attr("id");
this.primaryOnly = $(opts.orig).data("primary");
this.ABExperiment = $(opts.orig).data("ab");
this.toggle = $(opts.orig).data("toggle");
this.toggleOptions = $(opts.orig).data("toggleoptions");
this.toggleLabels = $(opts.orig).data("togglelabels");
opts.orig.id = this.selector_id;
}
/**
Expand Down Expand Up @@ -81,8 +82,11 @@ export default class SelectOne extends RunestoneBase {
if (this.timedWrapper) {
data.timedWrapper = this.timedWrapper;
}
if (this.toggle) {
data.toggle = this.toggle;
if (this.toggleOptions) {
data.toggleOptions = this.toggleOptions;
}
if (this.toggleLabels) {
data.toggleLabels = this.toggleLabels;
}
let opts = this.origOpts;
let selectorId = this.selector_id;
Expand Down Expand Up @@ -121,14 +125,25 @@ export default class SelectOne extends RunestoneBase {
self.containerDiv = res.question.containerDiv;
self.realComponent.selectorId = selectorId;
} else {
///////////////////////////
if (data.toggle) {
if (data.toggleOptions) {
var toggleLabels = data.toggleLabels.replace("togglelabels:", "").trim();
if (toggleLabels) {
toggleLabels = toggleLabels.split(",");
for (var t = 0; t < toggleLabels.length; t++) {
toggleLabels[t] = toggleLabels[t].trim();
}
}
var toggleQuestions = this.questions.split(", ");
var toggleUI = "";
// 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
if (!document.getElementById("component-preview")) {
toggleUI +=
'<div id="component-preview" class="col-md-6 toggle-preview" style="z-index: 999;"></div>';
'<div id="component-preview" class="col-md-6 toggle-preview" style="z-index: 999;">' +
'<div id="toggle-buttons"></div>' +
'<div id="toggle-preview"></div>' +
'</div>';
}
// dropdown menu containing the question options
toggleUI +=
'<label for="' +
selectorId +
Expand All @@ -139,6 +154,7 @@ export default class SelectOne extends RunestoneBase {
var toggleQuestionHTMLSrc;
var toggleQuestionSubstring;
var toggleQuestionType;
var toggleQuestionTypes = [];
for (i = 0; i < toggleQuestions.length; i++) {
toggleQuestionHTMLSrc = await this.getToggleSrc(
toggleQuestions[i]
Expand All @@ -147,13 +163,13 @@ export default class SelectOne extends RunestoneBase {
'data-component="'
)[1];
switch (
toggleQuestionSubstring.substring(
toggleQuestionSubstring.slice(
0,
toggleQuestionSubstring.indexOf('"')
)
) {
case "activecode":
toggleQuestionType = "Active Code";
toggleQuestionType = "Active Write Code";
break;
case "clickablearea":
toggleQuestionType = "Clickable Area";
Expand All @@ -168,20 +184,36 @@ export default class SelectOne extends RunestoneBase {
toggleQuestionType = "Multiple Choice";
break;
case "parsons":
toggleQuestionType = "Parsons";
toggleQuestionType = "Parsons Mixed-Up Code";
break;
case "shortanswer":
toggleQuestionType = "Short Answer";
break;
}
toggleQuestionTypes[i] = toggleQuestionType;
toggleUI +=
'<option value="' +
toggleQuestions[i] +
'">' +
toggleQuestionType +
'">';
if (toggleLabels) {
if (toggleLabels[i]) {
toggleUI += toggleLabels[i];
}
else {
toggleUI += toggleQuestionType +
" - " +
toggleQuestions[i];
}
}
else {
toggleUI += toggleQuestionType +
" - " +
toggleQuestions[i] +
"</option>";
toggleQuestions[i];
}
if ((i == 0) && (data.toggleOptions.includes("lock"))) {
toggleUI += " (only this question will be graded)";
}
toggleUI += "</option>";
}
toggleUI +=
'</select><div id="' +
Expand All @@ -191,14 +223,12 @@ export default class SelectOne extends RunestoneBase {
toggleFirstID = toggleFirstID.split('"')[0];
htmlsrc = toggleUI + htmlsrc + "</div>";
}
///////////////////////////
// just render this component on the page in its usual place
await renderRunestoneComponent(htmlsrc, selectorId, {
selector_id: selectorId,
useRunestoneServices: true,
});
///////////////////////////
if (data.toggle) {
if (data.toggleOptions) {
$("#component-preview").hide();
var toggleQuestionSelect = document.getElementById(
selectorId + "-toggleQuestion"
Expand All @@ -212,23 +242,29 @@ export default class SelectOne extends RunestoneBase {
"toggle_current",
toggleFirstID
);
$("#" + selectorId).data(
"toggle_current_type",
toggleQuestionTypes[0]
);
break;
}
}
toggleQuestionSelect.addEventListener(
"change",
async function () {
await this.togglePreview(
toggleQuestionSelect.parentElement.id
toggleQuestionSelect.parentElement.id,
data.toggleOptions,
toggleQuestionTypes
);
}.bind(this)
);
}
///////////////////////////
}
return response;
}

// retrieve html source of a question, for use in various toggle functionalities
async getToggleSrc(toggleQuestionID) {
let request = new Request(
"/runestone/admin/htmlsrc?acid=" + toggleQuestionID,
Expand All @@ -241,47 +277,71 @@ export default class SelectOne extends RunestoneBase {
return htmlsrc;
}

async togglePreview(parentID) {
// on changing the value of toggle select dropdown, render selected question in preview panel, add appropriate buttons, then make preview panel visible
async togglePreview(parentID, toggleOptions, toggleQuestionTypes) {
$("#toggle-buttons").html("");
var parentDiv = document.getElementById(parentID);
var toggleQuestionSelect = parentDiv.getElementsByTagName("select")[0];
var selectedQuestion =
toggleQuestionSelect.options[toggleQuestionSelect.selectedIndex]
.value;
var htmlsrc = await this.getToggleSrc(selectedQuestion);
let res = renderRunestoneComponent(htmlsrc, "component-preview", {
selector_id: "component-preview",
renderRunestoneComponent(htmlsrc, "toggle-preview", {
selector_id: "toggle-preview",
useRunestoneServices: true,
});
// let pd = document.getElementById(preview_div);
// pd.appendChild(renderGradingComponents(sid, selectedQuestion));

// add "Close Preview" button to the preview panel
let closeButton = document.createElement("button");
$(closeButton).text("Close Preview");
$(closeButton).addClass("btn btn-default");
$(closeButton).click(function (event) {
$("#component-preview").html("");
$("#toggle-preview").html("");
toggleQuestionSelect.value = $("#" + parentID).data(
"toggle_current"
);
$("#component-preview").hide();
});
$("#component-preview").append(closeButton);
$("#toggle-buttons").append(closeButton);

// if "lock" is not in toggle options, then allow adding more buttons to the preview panel
if (!(toggleOptions.includes("lock"))) {
let setButton = document.createElement("button");
$(setButton).text("Select this Problem");
$(setButton).addClass("btn btn-primary");
$(setButton).click(
async function () {
await this.toggleSet(parentID, selectedQuestion, htmlsrc, toggleQuestionTypes);
$("#component-preview").hide();
}.bind(this)
);
$("#toggle-buttons").append(setButton);

// 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
if (toggleOptions.includes("transfer")) {
var currentType = $("#" + parentID).data("toggle_current_type");
var selectedType = toggleQuestionTypes[toggleQuestionSelect.selectedIndex];
if ((currentType == "Parsons Mixed-Up Code") && (selectedType == "Active Write Code")) {
let transferButton = document.createElement("button");
$(transferButton).text("Transfer Response");
$(transferButton).addClass("btn btn-primary");
$(transferButton).click(
async function () {
await this.toggleTransfer(parentID, selectedQuestion, htmlsrc, toggleQuestionTypes);
}.bind(this)
);
$("#toggle-buttons").append(transferButton);
}
}
}

let setButton = document.createElement("button");
$(setButton).text("Select this Problem");
$(setButton).addClass("btn btn-primary");
$(setButton).click(
async function () {
await this.toggleSet(parentID, selectedQuestion, htmlsrc);
$("#component-preview").hide();
}.bind(this)
);
$("#component-preview").append(setButton);
$("#component-preview").show();
}

async toggleSet(parentID, selectedQuestion, htmlsrc) {
// 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
async toggleSet(parentID, selectedQuestion, htmlsrc, toggleQuestionTypes) {
var selectorId = parentID + "-toggleSelectedQuestion";
var toggleQuestionSelect = document.getElementById(parentID).getElementsByTagName("select")[0];
document.getElementById(selectorId).innerHTML = ""; // need to check whether this is even necessary
await renderRunestoneComponent(htmlsrc, selectorId, {
selector_id: selectorId,
Expand All @@ -295,8 +355,69 @@ export default class SelectOne extends RunestoneBase {
{}
);
await fetch(request);
$("#component-preview").html("");
$("#toggle-preview").html("");
$("#" + parentID).data("toggle_current", selectedQuestion);
$("#" + parentID).data("toggle_current_type", toggleQuestionTypes[toggleQuestionSelect.selectedIndex]);
}

// 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
async toggleTransfer(parentID, selectedQuestion, htmlsrc, toggleQuestionTypes) {
// retrieve all Parsons lines within the answer space and loop through this list
var currentParsons = document.getElementById(parentID + "-toggleSelectedQuestion").querySelectorAll("div[class^='answer']")[0].getElementsByClassName("prettyprint lang-py");
var currentParsonsClass;
var currentBlockIndent;
var indentCount
var indent;
var parsonsLine;
var parsonsLines = ``;
var count;
for (var p = 0; p < currentParsons.length; p++) {
indentCount = 0;
indent = "";
// for Parsons blocks that have built-in indentation in their lines
currentParsonsClass = currentParsons[p].classList[2];
if (currentParsonsClass) {
if (currentParsonsClass.includes("indent")) {
indentCount = parseInt(indentCount) + parseInt(currentParsonsClass.slice(6,currentParsonsClass.length));
}
}
// for Parsons answer spaces with vertical lines that allow student to define their own line indentation
currentBlockIndent = currentParsons[p].parentElement.parentElement.style.left;
if (currentBlockIndent) {
indentCount = parseInt(indentCount) + parseInt(currentBlockIndent.slice(0,currentBlockIndent.indexOf("px")) / 30);
}
for (var d = 0; d < indentCount; d++) {
indent += " ";
}
// retrieve each text snippet of each Parsons line and loop through this list
parsonsLine = currentParsons[p].getElementsByTagName("span");
count = 0;
for (var l = 0; l < parsonsLine.length; l++) {
if (parsonsLine[l].childNodes[0].nodeName == "#text") { // Parsons blocks have differing amounts of hierarchy levels (spans within spans)
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
parsonsLines += indent + parsonsLine[l].innerHTML;
count++;
}
else if (count != 0) {
parsonsLines += parsonsLine[l].innerHTML;
count++;
}
else {
parsonsLines = parsonsLines + `
` + indent + parsonsLine[l].innerHTML;
parsonsLines = parsonsLines.replace(" ", "");
count++;
}
}
}
}
// replace all existing code within selected active code question with extracted Parsons text
var htmlsrcFormer = htmlsrc.slice(0, htmlsrc.indexOf("<textarea") + htmlsrc.split("<textarea")[1].indexOf(">") + 10);
var htmlsrcLatter = htmlsrc.slice(htmlsrc.indexOf("</textarea>"), htmlsrc.length);
htmlsrc = htmlsrcFormer + parsonsLines + htmlsrcLatter;

await this.toggleSet(parentID, selectedQuestion, htmlsrc, toggleQuestionTypes);
$("#component-preview").hide();
}
}

Expand Down
26 changes: 21 additions & 5 deletions runestone/selectquestion/selectone.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@

TEMPLATE = """
<div class="runestone alert alert-warning sqcontainer">
<div data-component="selectquestion" id={component_id} {selector} {points} {proficiency} {min_difficulty} {max_difficulty} {autogradable} {not_seen_ever} {primary} {AB} {toggle}>
<div data-component="selectquestion" id={component_id} {selector} {points} {proficiency} {min_difficulty} {max_difficulty} {autogradable} {not_seen_ever} {primary} {AB} {toggle_options} {toggle_labels}>
<p>Loading ...</p>
</div>
</div>
Expand All @@ -72,6 +72,7 @@ class SelectQuestion(RunestoneIdDirective):
:max_difficulty: maximum difficulty level
:ab: experiment_name
:toggle: allow student to choose which question to answer from the given list, with first question in fromid list being rendered first
:togglelabels: relabel each question in the fromid list according to input here; blank will revert to a default label

Difficulty is measured in one of two ways. For things like multiple choice and
fill in the blank, we can use the % of students that get the answer correct on
Expand All @@ -94,7 +95,8 @@ class SelectQuestion(RunestoneIdDirective):
"not_seen_ever": directives.flag,
"primary": directives.flag,
"ab": directives.unchanged,
"toggle": directives.flag,
"toggle": directives.unchanged,
"togglelabels": directives.unchanged,
}
)

Expand Down Expand Up @@ -182,10 +184,24 @@ def run(self):
else:
self.options["AB"] = ""

if "toggle" in self.options:
self.options["toggle"] = "data-toggle=true"
if ("toggle" in self.options) or ("togglelabels" in self.options):
self.options[
"toggle_options"
] = "data-toggleoptions=\"toggle\""
self.options[
"toggle_labels"
] = "data-togglelabels=\"togglelabels:\""
if "toggle" in self.options:
self.options[
"toggle_options"
] = "data-toggleoptions=\"toggle, " + f"{self.options['toggle']}" + "\""
if "togglelabels" in self.options:
self.options[
"toggle_labels"
] = "data-togglelabels=\"togglelabels: " + f"{self.options['togglelabels']}" + "\""
else:
self.options["toggle"] = ""
self.options["toggle_options"] = ""
self.options["toggle_labels"] = ""

maybeAddToAssignment(self)

Expand Down