diff --git a/mod/quiz/styles.css b/mod/quiz/styles.css
index 491140a4b8a..8c793159e3f 100644
--- a/mod/quiz/styles.css
+++ b/mod/quiz/styles.css
@@ -39,10 +39,6 @@
     border: 1px solid #dcdcdc;
 }
 
-body.jsenabled .questionflagcheckbox {
-    display: none;
-}
-
 #page-mod-quiz-attempt #connection-ok,
 #page-mod-quiz-attempt #connection-error {
     position: fixed;
diff --git a/question/engine/renderer.php b/question/engine/renderer.php
index 4ce351e39e4..ab3524746d0 100644
--- a/question/engine/renderer.php
+++ b/question/engine/renderer.php
@@ -323,21 +323,23 @@ class core_question_renderer extends plugin_renderer_base {
         if ($flagged) {
             $icon = 'i/flagged';
             $alt = get_string('flagged', 'question');
+            $label = get_string('clickunflag', 'question');
         } else {
             $icon = 'i/unflagged';
             $alt = get_string('notflagged', 'question');
+            $label = get_string('clickflag', 'question');
         }
         $attributes = array(
             'src' => $this->image_url($icon),
             'alt' => $alt,
+            'class' => 'questionflagimage',
         );
         if ($id) {
             $attributes['id'] = $id;
         }
         $img = html_writer::empty_tag('img', $attributes);
-        if ($flagged) {
-            $img .= ' ' . get_string('flagged', 'question');
-        }
+        $img .= html_writer::span($label);
+
         return $img;
     }
 
diff --git a/theme/boost/scss/moodle/question.scss b/theme/boost/scss/moodle/question.scss
index ce19643bacc..4831fe58dbc 100644
--- a/theme/boost/scss/moodle/question.scss
+++ b/theme/boost/scss/moodle/question.scss
@@ -409,7 +409,11 @@ body.path-question-type {
     vertical-align: text-bottom;
 }
 
-.que input.questionflagimage {
+body.jsenabled .questionflag input[type=checkbox] {
+    display: none;
+}
+
+.que .questionflagimage {
     padding-right: 3px;
     height: 16px;
     width: 16px;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 01b77d5de3d..abce8ea4dda 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -15014,7 +15014,10 @@ body.path-question-type {
 .que .questioncorrectnessicon {
   vertical-align: text-bottom; }
 
-.que input.questionflagimage {
+body.jsenabled .questionflag input[type=checkbox] {
+  display: none; }
+
+.que .questionflagimage {
   padding-right: 3px;
   height: 16px;
   width: 16px; }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index b3e59020ccf..025b86db9b8 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -15234,7 +15234,10 @@ body.path-question-type {
 .que .questioncorrectnessicon {
   vertical-align: text-bottom; }
 
-.que input.questionflagimage {
+body.jsenabled .questionflag input[type=checkbox] {
+  display: none; }
+
+.que .questionflagimage {
   padding-right: 3px;
   height: 16px;
   width: 16px; }