functioning flag button with its own handler and listener

Author: constantinol

runestone/timed/css/timed.css

@@ -23,7 +23,19 @@ ul#pageNums li {
     display: inline-block;
     font-size: 15px;
 }
-/* adding to here DELETE THIS*/
+/* 
+.flagBtn {
+    background-color: #FFFF99 !important;
+    border: none;
+    color: #030201 !important;
+    cursor: pointer;
+    width: 150;
+    height: 115;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 15px;
+} */
 
 /* The following override styles in Bootstrap distribution file (bootstrap.min.css) */
 
@@ -58,6 +70,12 @@ ul#pageNums li {
     color: #000;
 }
 
+.pagination > .flagcolor > a,
+.pagination > .flagcolor > span {
+    background-color: #fac989;
+    color: #000;
+}
+
 p.examwarning {
     width: 50%;
     margin-left: auto;

runestone/timed/js/timed.js

@@ -262,7 +262,9 @@ export default class Timed extends RunestoneBase {
         this.leftContainer.appendChild(this.leftNavButton);
         this.pagNavList.appendChild(this.leftContainer);
         //
-        this.leftContainer = document.createElement("li");
+        this.flaggingPlace = document.createElement("ul");
+        $(this.flaggingPlace).addClass("pagination");
+        this.flagContainer = document.createElement("li");
         this.flagButton = document.createElement("button");
         $(this.flagButton).addClass("class1");
         this.flagButton.innerHTML = "Flag";
@@ -271,8 +273,8 @@ export default class Timed extends RunestoneBase {
         $(this.flagButton).attr("role", "button");
         $(this.flagButton).attr("id", "flag");
         $(this.flagButton).css("cursor", "pointer");
-        this.leftContainer.appendChild(this.flagButton);
-        this.pagNavList.appendChild(this.leftContainer);
+        this.flagContainer.appendChild(this.flagButton);
+        this.flaggingPlace.appendChild(this.flagContainer);
         //
         this.rightContainer = document.createElement("li");
         this.rightNavButton = document.createElement("button");
@@ -286,6 +288,7 @@ export default class Timed extends RunestoneBase {
         this.pagNavList.appendChild(this.rightContainer);
         this.ensureButtonSafety();
         this.navDiv.appendChild(this.pagNavList);
+        this.navDiv.appendChild(this.flaggingPlace);
         this.break = document.createElement("br");
         this.navDiv.appendChild(this.break);
         // render the question number jump buttons
@@ -308,6 +311,7 @@ export default class Timed extends RunestoneBase {
         this.qNumList.appendChild(this.qNumWrapperList);
         this.navDiv.appendChild(this.qNumList);
         this.navBtnListeners();
+        this.flagBtnListener();
     }
 
     // when moving off of a question in an active exam:
@@ -381,6 +385,14 @@ export default class Timed extends RunestoneBase {
         ).addClass("active");
     }
 
+    async handleFlag(event) {
+        var target = $(event.target).text()
+        if (target.match(/Flag/)) {
+            $("ul#pageNums > ul > li:eq(" + this.currentQuestionIndex + ")"
+            ).addClass("flagcolor");
+        } 
+    }
+
     async handleNumberedNav(event) {
         if (!this.taken) {
             await this.navigateAway();
@@ -428,6 +440,15 @@ export default class Timed extends RunestoneBase {
         );
     }
 
+    // set up events for flag
+    flagBtnListener() {
+        this.flaggingPlace.addEventListener(
+            "click",
+            this.handleFlag.bind(this),
+            false
+        );
+    }
+
     renderSubmitButton() {
         this.buttonContainer = document.createElement("div");
         $(this.buttonContainer).attr({