Merge pull request #1218 from constantinol/flag

Addition of "Flag Question" button to timed exams

Author: bnmnetp

.gitattributes

@@ -0,0 +1,2 @@
+# Declare files that must always have LF line endings on checkout so docker compose works on Windows
+*   eol=lf

runestone/timed/css/timed.css

@@ -10,6 +10,20 @@ ul#pageNums li {
     color: #000 !important;
 }
 
+.flagBtn { /* documentation */
+    background-color: #ED9C59 !important;
+    border: 3px solid #CE5718;
+    border-radius: 5px;
+    color: #030201 !important;
+    cursor: pointer;
+    width: 150;
+    height: 115;
+    text-align: center;
+    text-decoration: none;
+    display: ruby;
+    font-size: 15px;
+}
+
 /* The following override styles in Bootstrap distribution file (bootstrap.min.css) */
 
 .pagination > .active > a,
@@ -43,6 +57,12 @@ ul#pageNums li {
     color: #000;
 }
 
+.pagination > .flagcolor > a,
+.pagination > .flagcolor > span {
+    background-color: #ED9C59;
+    color: #000;
+}
+
 p.examwarning {
     width: 50%;
     margin-left: auto;

runestone/timed/js/timed.js

@@ -173,10 +173,15 @@ export default class Timed extends RunestoneBase {
         $(this.navDiv).attr({
             style: "text-align:center",
         });
+        this.flagDiv = document.createElement("div"); // div that will hold the "Flag Question" button
+        $(this.flagDiv).attr({
+            style: "text-align: center",
+        });
         this.switchContainer = document.createElement("div");
         this.switchContainer.classList.add("switchcontainer");
         this.switchDiv = document.createElement("div"); // is replaced by the questions
         this.timedDiv.appendChild(this.navDiv);
+        this.timedDiv.appendChild(this.flagDiv); // add flagDiv to timedDiv, which holds components for navigation and questions for timed assessment
         this.timedDiv.appendChild(this.switchContainer);
         this.switchContainer.appendChild(this.switchDiv);
         $(this.timedDiv).attr({
@@ -213,6 +218,7 @@ export default class Timed extends RunestoneBase {
             "click",
             async function () {
                 $(this.finishButton).hide(); // hide the finish button for now
+                $(this.flagButton).show();
                 let mess = document.createElement("p");
                 mess.innerHTML =
                     "<strong>Warning: You will not be able to continue the exam if you close this tab, close the window, or navigate away from this page!</strong>  Make sure you click the Finish Exam button when you are done to submit your work!";
@@ -249,6 +255,7 @@ export default class Timed extends RunestoneBase {
     }
 
     renderNavControls() {
+        // making "Prev" button
         this.pagNavList = document.createElement("ul");
         $(this.pagNavList).addClass("pagination");
         this.leftContainer = document.createElement("li");
@@ -261,6 +268,21 @@ export default class Timed extends RunestoneBase {
         $(this.leftNavButton).css("cursor", "pointer");
         this.leftContainer.appendChild(this.leftNavButton);
         this.pagNavList.appendChild(this.leftContainer);
+        // making "Flag Question" button
+        this.flaggingPlace = document.createElement("ul");
+        $(this.flaggingPlace).addClass("pagination");
+        this.flagContainer = document.createElement("li");
+        this.flagButton = document.createElement("button");
+        $(this.flagButton).addClass("flagBtn");
+        this.flagButton.innerHTML = "Flag Question";            // name on button
+        $(this.flagButton).attr("aria-labelledby", "Flag");
+        $(this.flagButton).attr("tabindex", "5");
+        $(this.flagButton).attr("role", "button");
+        $(this.flagButton).attr("id", "flag");
+        $(this.flagButton).css("cursor", "pointer");
+        this.flagContainer.appendChild(this.flagButton);        // adding button to container
+        this.flaggingPlace.appendChild(this.flagContainer);     // adding container to flaggingPlace
+        // making "Next" button
         this.rightContainer = document.createElement("li");
         this.rightNavButton = document.createElement("button");
         $(this.rightNavButton).attr("aria-label", "Next");
@@ -273,6 +295,7 @@ export default class Timed extends RunestoneBase {
         this.pagNavList.appendChild(this.rightContainer);
         this.ensureButtonSafety();
         this.navDiv.appendChild(this.pagNavList);
+        this.flagDiv.appendChild(this.flaggingPlace);           // adds flaggingPlace to the flagDiv 
         this.break = document.createElement("br");
         this.navDiv.appendChild(this.break);
         // render the question number jump buttons
@@ -295,6 +318,8 @@ export default class Timed extends RunestoneBase {
         this.qNumList.appendChild(this.qNumWrapperList);
         this.navDiv.appendChild(this.qNumList);
         this.navBtnListeners();
+        this.flagBtnListener();                                 // listens for click on flag button
+        $(this.flagButton).hide();
     }
 
     // when moving off of a question in an active exam:
@@ -339,12 +364,12 @@ export default class Timed extends RunestoneBase {
             await this.navigateAway();
         }
         var target = $(event.target).text();
-        if (target.match(/Next/)) {
+        if (target.match(/Next/)) {                   // checks given text to match "Next"
             if ($(this.rightContainer).hasClass("disabled")) {
                 return;
             }
             this.currentQuestionIndex++;
-        } else if (target.match(/Prev/)) {
+        } else if (target.match(/Prev/)) {               // checks given text to match "Prev"
             if ($(this.leftContainer).hasClass("disabled")) {
                 return;
             }
@@ -366,6 +391,27 @@ export default class Timed extends RunestoneBase {
         $(
             "ul#pageNums > ul > li:eq(" + this.currentQuestionIndex + ")"
         ).addClass("active");
+        if  ($("ul#pageNums > ul > li:eq(" + this.currentQuestionIndex + ")"
+        ).hasClass("flagcolor")){                                           // checking for class 
+            this.flagButton.innerHTML = "Unflag Question";                  // changes text on button
+        }
+        else{
+            this.flagButton.innerHTML = "Flag Question";                    // changes text on button
+        }
+    }
+
+    async handleFlag(event) {
+        // called when flag button is clicked
+        var target = $(event.target).text()
+        if (target.match(/Flag Question/)) {
+            $("ul#pageNums > ul > li:eq(" + this.currentQuestionIndex + ")"
+            ).addClass("flagcolor");                            // class will change color of question block
+            this.flagButton.innerHTML = "Unflag Question";
+        } else {
+            $("ul#pageNums > ul > li:eq(" + this.currentQuestionIndex + ")"
+            ).removeClass("flagcolor");                         // will restore current color of question block
+            this.flagButton.innerHTML = "Flag Question";        // also sets name back
+        }
     }
 
     async handleNumberedNav(event) {
@@ -394,6 +440,13 @@ export default class Timed extends RunestoneBase {
         $(
             "ul#pageNums > ul > li:eq(" + this.currentQuestionIndex + ")"
         ).addClass("active");
+        if  ($("ul#pageNums > ul > li:eq(" + this.currentQuestionIndex + ")"      // checking for flagcolor class
+        ).hasClass("flagcolor")){
+            this.flagButton.innerHTML = "Unflag Question";
+        }
+        else{
+            this.flagButton.innerHTML = "Flag Question";
+        }
         await this.renderTimedQuestion();
         this.ensureButtonSafety();
     }
@@ -415,6 +468,15 @@ export default class Timed extends RunestoneBase {
         );
     }
 
+    // set up event for flag
+    flagBtnListener() {
+        this.flaggingPlace.addEventListener(
+            "click",
+            this.handleFlag.bind(this),     // calls this to take action
+            false
+        );
+    }
+
     renderSubmitButton() {
         this.buttonContainer = document.createElement("div");
         $(this.buttonContainer).attr({
@@ -435,6 +497,7 @@ export default class Timed extends RunestoneBase {
                     )
                 ) {
                     await this.finishAssessment();
+                    $(this.flagButton).hide();
                 }
             }.bind(this),
             false