Show timed icon clock

package.json

@@ -43,4 +43,4 @@
         "vega-embed": "3.14.0",
         "wavedrom": "^2.0.0"
     }
-}
+}

runestone/activecode/js/activecode.js

@@ -141,7 +141,7 @@ export class ActiveCode extends RunestoneBase {
         this.outerDiv = document.createElement("div");
         var linkdiv = document.createElement("div");
         linkdiv.id = this.divid.replace(/_/g, "-").toLowerCase(); // :ref: changes _ to - so add this as a target
-        $(this.outerDiv).addClass("ac_section alert alert-warning");
+        $(this.outerDiv).addClass("ac_section");
         var codeDiv = document.createElement("div");
         $(codeDiv).addClass("ac_code_div col-md-12");
         this.codeDiv = codeDiv;

runestone/activecode/js/timed_activecode.js

@@ -12,10 +12,11 @@ import SQLActiveCode from "./activecode_sql";
 var TimedActiveCodeMixin = {
     timedInit: async function (opts) {
         this.isTimed = true;
+        this.renderTimedIcon(this.containerDiv);
         this.hideButtons();
         await this.addHistoryScrubber(true); // position last
         this.needsReinitialization = true; // the run button click listener needs to be reinitialized
-        this.containerDiv.classList.add("timedComponent");
+        this.containerDiv.classList.add("timedComponent", "alert", "alert-warning");
         window.edList[this.divid] = this;
         return true;
     },
@@ -35,19 +36,12 @@ var TimedActiveCodeMixin = {
         }
     },
 
-    // bje - not needed anymore
     renderTimedIcon: function (component) {
-        // renders the clock icon on timed components.    The component parameter
+        // renders the clock icon on timed components. The component parameter
         // is the element that the icon should be appended to.
         var timeIconDiv = document.createElement("div");
-        var timeIcon = document.createElement("img");
-        $(timeIcon).attr({
-            src: "../_static/clock.png",
-            style: "width:15px;height:15px",
-        });
         timeIconDiv.className = "timeTip";
         timeIconDiv.title = "";
-        timeIconDiv.appendChild(timeIcon);
         $(component).prepend(timeIconDiv);
     },
 

runestone/clickableArea/js/timedclickable.js

@@ -18,14 +18,8 @@ export default class TimedClickableArea extends ClickableArea {
         // renders the clock icon on timed components.    The component parameter
         // is the element that the icon should be appended to.
         var timeIconDiv = document.createElement("div");
-        var timeIcon = document.createElement("img");
-        $(timeIcon).attr({
-            src: "../_static/clock.png",
-            style: "width:15px;height:15px",
-        });
         timeIconDiv.className = "timeTip";
         timeIconDiv.title = "";
-        timeIconDiv.appendChild(timeIcon);
         $(component).prepend(timeIconDiv);
     }
 

runestone/common/css/time-tip.css

@@ -0,0 +1,8 @@
+.timeTip {
+    background-image: url(./clock.png);
+    background-size: 15px;
+    width: 15px;
+    height: 15px;
+    position: relative;
+    left: 50%;
+}

runestone/common/js/bookfuncs.js

@@ -240,14 +240,6 @@ $(function () {
 // misc stuff
 // todo:  This could be further distributed but making a video.js file just for one function seems dumb.
 window.addEventListener("load", function () {
-    // add the video play button overlay image
-    $(".video-play-overlay").each(function () {
-        $(this).css(
-            "background-image",
-            "url('{{pathto('_static/play_overlay_icon.png', 1)}}')"
-        );
-    });
-
     // This function is needed to allow the dropdown search bar to work;
     // The default behaviour is that the dropdown menu closes when something in
     // it (like the search bar) is clicked

runestone/dragndrop/js/timeddnd.js

@@ -16,14 +16,8 @@ export default class TimedDragNDrop extends DragNDrop {
         // renders the clock icon on timed components.    The component parameter
         // is the element that the icon should be appended to.
         var timeIconDiv = document.createElement("div");
-        var timeIcon = document.createElement("img");
-        $(timeIcon).attr({
-            src: "../_static/clock.png",
-            style: "width:15px;height:15px",
-        });
         timeIconDiv.className = "timeTip";
         timeIconDiv.title = "";
-        timeIconDiv.appendChild(timeIcon);
         $(component).prepend(timeIconDiv);
     }
     checkCorrectTimed() {

runestone/fitb/js/timedfitb.js

@@ -2,7 +2,7 @@ import FITB from "./fitb.js";
 export default class TimedFITB extends FITB {
     constructor(opts) {
         super(opts);
-        this.renderTimedIcon(this.inputDiv);
+        this.renderTimedIcon(this.containerDiv);
         this.hideButtons();
         this.needsReinitialization = true;
     }
@@ -14,14 +14,8 @@ export default class TimedFITB extends FITB {
         // renders the clock icon on timed components.    The component parameter
         // is the element that the icon should be appended to.
         var timeIconDiv = document.createElement("div");
-        var timeIcon = document.createElement("img");
-        $(timeIcon).attr({
-            src: "../_static/clock.png",
-            style: "width:15px;height:15px",
-        });
         timeIconDiv.className = "timeTip";
         timeIconDiv.title = "";
-        timeIconDiv.appendChild(timeIcon);
         $(component).prepend(timeIconDiv);
     }
     checkCorrectTimed() {

runestone/mchoice/js/timedmc.js

@@ -5,22 +5,16 @@ export default class TimedMC extends MultipleChoice {
         super(opts);
         $(this.containerDiv).addClass("alert alert-warning runestone");
         this.needsReinitialization = true;
-        this.renderTimedIcon(this.MCContainer);
+        this.renderTimedIcon(this.containerDiv);
         this.hideButtons(); // Don't show per-question buttons in a timed assessment
     }
 
     renderTimedIcon(component) {
         // renders the clock icon on timed components.    The component parameter
         // is the element that the icon should be appended to.
         var timeIconDiv = document.createElement("div");
-        var timeIcon = document.createElement("img");
-        $(timeIcon).attr({
-            src: "../_static/clock.png",
-            style: "width:15px;height:15px",
-        });
         timeIconDiv.className = "timeTip";
         timeIconDiv.title = "";
-        timeIconDiv.appendChild(timeIcon);
         $(component).prepend(timeIconDiv);
     }
     hideButtons() {

runestone/parsons/js/timedparsons.js

@@ -11,10 +11,19 @@ export default class TimedParsons extends Parsons {
         }
         this.grader.showfeedback = this.showfeedback;
         this.hideFeedback();
+        this.renderTimedIcon(this.containerDiv);
         $(this.checkButton).hide();
         $(this.helpButton).hide();
         $(this.resetButton).hide();
     }
+    renderTimedIcon(component) {
+        // renders the clock icon on timed components.    The component parameter
+        // is the element that the icon should be appended to.
+        var timeIconDiv = document.createElement("div");
+        timeIconDiv.className = "timeTip";
+        timeIconDiv.title = "";
+        $(component).prepend(timeIconDiv);
+    }
     checkCorrectTimed() {
         return this.correct ? "T" : "F";
     }

runestone/shortanswer/js/timed_shortanswer.js

@@ -13,14 +13,8 @@ export default class TimedShortAnswer extends ShortAnswer {
         // renders the clock icon on timed components.    The component parameter
         // is the element that the icon should be appended to.
         var timeIconDiv = document.createElement("div");
-        var timeIcon = document.createElement("img");
-        $(timeIcon).attr({
-            src: "../_static/clock.png",
-            style: "width:15px;height:15px",
-        });
         timeIconDiv.className = "timeTip";
         timeIconDiv.title = "";
-        timeIconDiv.appendChild(timeIcon);
         $(component).prepend(timeIconDiv);
     }
     checkCorrectTimed() {

webpack.index.js

@@ -37,6 +37,9 @@ import "bootstrap/dist/css/bootstrap.css";
 import "./runestone/common/project_template/_templates/plugin_layouts/sphinx_bootstrap/static/bootstrap-sphinx.js";
 import "./runestone/common/css/runestone-custom-sphinx-bootstrap.css";
 
+// Timed questions related style
+import "./runestone/common/css/time-tip.css";
+
 // Misc
 import "./runestone/common/js/bookfuncs.js";
 import "./runestone/common/js/user-highlights.js";