fixed bug where green check and red X do not appear if there is no qu…

…estion title
priism-center · May 15, 2024 · 123c5d0 · 123c5d0
1 parent 04a811a
commit 123c5d0
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 44 deletions.
diff --git a/R/shiny-module.R b/R/shiny-module.R
@@ -133,7 +133,7 @@ quiz_server <- function(quiz){
       delay_in_ms <- 2000
       if (is_correct){
         # add UI indicator
-        add_checkmark(ns = ns, id = 'quiz-container', element = 'h3')
+        add_checkmark(ns = ns, id = 'quiz-container')
 
         # change the state
         shinyjs::delay(delay_in_ms, {
@@ -143,7 +143,7 @@ quiz_server <- function(quiz){
 
       } else {
         # add UI indicator
-        add_red_x(ns = ns, id = 'quiz-container', element = 'h3')
+        add_red_x(ns = ns, id = 'quiz-container')
 
         # change the state
         # depending on options, go to next question otherwise end here

diff --git a/R/utils-ui.R b/R/utils-ui.R
@@ -15,64 +15,51 @@ scroll_to_div <- function(ns = NULL, id = 'quiz-container'){
   shinyjs::runjs(js)
 }
 
-#' Add a green checkmark to a div
+#' Add an icon to a div
 #'
 #' @param ns namespace of the Shiny module
-#' @param id id of the div to add the checkmark to
-#' @param element element within the div to place the checkmark
+#' @param id id of the div to add the X to
+#' @param element element within the div to place the X
 #'
 #' @return called for side effect
 #' @author Joseph Marlo
 #' @noRd
 #' @keywords internal
-add_checkmark <- function(ns = NULL, id = 'quiz-container', element = 'h3'){
+add_grade_icon <- function(ns, id, icon, color){
 
-  # construct selector
-  if (!missing(ns)) id <- paste0("#", ns(id))
-  if (!missing(element)) selector <- paste(id, element)
-  div_selector <- paste0('$("', selector, '")')
+  # construct the base selector
+  if (!missing(ns)) {
+    id <- paste0("#", ns(id))
+  } else {
+    id <- paste0("#", id)
+  }
 
-  # construct javascript
-  js <- paste0(
-    'if (',
-    div_selector,
-    '.children().length===0){',
-    div_selector,
-    '.append("\t" + \'<span class="glyphicon glyphicon-ok" style="color:green; font-size: 0.9em;"></span>\')}'
+  # add the icon to the h3 element (question title) if it exists, otherwise h4 (question heading)
+  js <- glue::glue(
+    .open = "{{",
+    .close = '}}',
+    "var element = $('{{id}} h3').length > 0 ? 'h3' : 'h4'; 
+     var selector = '{{id}} ' + element;
+     var div_selector = $(selector);
+     if (div_selector.children().length === 0) {
+       div_selector.append('\\t' + '<span class=\\\"glyphicon glyphicon-{{icon}}\\\" style=\\\"color:{{color}}; font-size: 0.9em;\\\"></span>');
+     }"
   )
 
   # run js
   shinyjs::runjs(js)
 }
 
-#' Add a red X to a div
-#'
-#' @param ns namespace of the Shiny module
-#' @param id id of the div to add the X to
-#' @param element element within the div to place the X
-#'
-#' @return called for side effect
-#' @author Joseph Marlo
-#' @noRd
+#' @describeIn add_grade_icon
 #' @keywords internal
-add_red_x <- function(ns = NULL, id = 'quiz-container', element = 'h3'){
-
-  # construct selector
-  if (!missing(ns)) id <- paste0("#", ns(id))
-  if (!missing(element)) selector <- paste(id, element)
-  div_selector <- paste0('$("', selector, '")')
-
-  # construct javascript
-  js <- paste0(
-    'if (',
-    div_selector,
-    '.children().length===0){',
-    div_selector,
-    '.append("\t" + \'<span class="glyphicon glyphicon-remove" style="color:red; font-size: 0.9em;"></span>\')}'
-  )
-
-  # run js
-  shinyjs::runjs(js)
+add_checkmark <- function(ns = NULL, id = 'quiz-container'){
+  add_grade_icon(ns = ns, id = id, icon = 'ok', color = 'green')
+}
+
+#' @describeIn add_grade_icon
+#' @keywords internal
+add_red_x <- function(ns = NULL, id = 'quiz-container'){
+  add_grade_icon(ns = ns, id = id, icon = 'remove', color = 'red')
 }
 
 #' Add ending messages to the quiz