Merge pull request #7129 from Automattic/add/change-style-of-submitte…

…d-quizzes Update stylings of quiz questions in the submitted state in learning mode
Automattic · Sep 11, 2023 · 9daba73 · 9daba73
2 parents 327c9e9 + 80e18cb
commit 9daba73
Show file tree

Hide file tree

Showing 13 changed files with 132 additions and 29 deletions.
diff --git a/assets/blocks/quiz/question-block/question.scss b/assets/blocks/quiz/question-block/question.scss
@@ -54,6 +54,14 @@ $question-input-border-color: var(--wp--preset--color--foreground, #155E65 );
 			line-height: 1;
 		}
 	}
+
+	.wp-block-sensei-lms-question-answers__filename {
+		margin-bottom: 20px;
+	}
+
+	.wp-block-sensei-lms-question-answers__preview {
+		max-height: 480px;
+	}
 }
 
 .wp-block-sensei-lms-question-answers {

diff --git a/assets/css/3rd-party/themes/course/quiz.scss b/assets/css/3rd-party/themes/course/quiz.scss
@@ -1,3 +1,17 @@
+@import '../../../../shared/styles/variables';
+
+.wp-block-sensei-lms-quiz {
+	.wp-block-sensei-lms-question-answers {
+		&__answer {
+			color: $gray-50;
+		}
+
+		&__preview {
+			border: 1px solid var(--wp--preset--color--foreground);
+			border-radius: 4px;
+		}
+	}
+}
 .quiz {
 	.sensei-course-theme__quiz {
 		&__main-content {

diff --git a/assets/css/frontend.scss b/assets/css/frontend.scss
@@ -322,10 +322,6 @@ a.sensei-certificate-link {
 					}
 				}
 
-				.submitted_file {
-					font-weight: bold;
-				}
-
 				.reupload_notice {
 					font-style: italic;
 					margin-bottom: 5px;
@@ -364,7 +360,7 @@ a.sensei-certificate-link {
 						list-style: none;
 
 						input {
-							margin: 0 .382em 0 0;
+							margin: 0 10px 0 0;
 						}
 
 						label {

diff --git a/assets/css/sensei-course-theme/quiz-compat.scss b/assets/css/sensei-course-theme/quiz-compat.scss
@@ -1,4 +1,5 @@
 /* This file loads for all themes except Course. */
+@import '../../shared/styles/variables';
 @import '~@wordpress/base-styles/breakpoints';
 
 $textColor: #1E1E1E;
@@ -23,6 +24,21 @@ $textColor: #1E1E1E;
 	& * {
 		font-size: 1.125rem;
 	}
+
+	&__filename {
+		color: $textColor;
+		font-size: 18px;
+		font-style: normal;
+		font-weight: 400;
+
+		a {
+			color: #155E65
+		}
+	}
+
+	&__answer {
+		color: $gray-50;
+	}
 }
 
 .wp-block-sensei-lms-quiz {

diff --git a/assets/css/sensei-course-theme/quiz.scss b/assets/css/sensei-course-theme/quiz.scss
@@ -124,27 +124,30 @@ $vertical-spacing-desktop: 80px;
 				border: 6px solid var(--wp--preset--color--foreground, var(--sensei-secondary-color, #949494) );
 			}
 
-
+			input[type="radio"]:disabled:not(:checked),
+			input[type="radio"]:disabled:not(:checked) + label,
+			input[type="checkbox"]:disabled:not(:checked),
+			input[type="checkbox"]:disabled:not(:checked) + label {
+				opacity: 0.4;
+			}
 
 			.sensei-multiple-choice-answer-option-checkbox {
 				display: none;
 
 				& + label {
 					display: flex;
 					align-items: center;
-					gap: 10px;
 				}
 
 				& + label:before {
+					align-items: center;
+					border-radius: 2px;
 					content: "\00a0";
 					display: flex;
 					font-size: 1.1rem;
 					justify-content: center;
-					align-items: center;
+					margin-right: 10px;
 					padding: 0;
-					vertical-align: center;
-					border-radius: 2px;
-					margin-right: var(--wp--custom--comment-gap-small);
 				}
 
 				&:checked + label:before {

diff --git a/changelog/add-change-style-of-submitted-quizzes b/changelog/add-change-style-of-submitted-quizzes
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Update style of quiz questions that have been submitted for grading
diff --git a/changelog/template-changes b/changelog/template-changes
@@ -0,0 +1,4 @@
+Significance: minor
+Type: development
+
+Update question type templates
diff --git a/includes/blocks/class-sensei-quiz-blocks.php b/includes/blocks/class-sensei-quiz-blocks.php
@@ -82,6 +82,9 @@ public function initialize_blocks() {
 			[ 'sensei-lms/quiz-question' ],
 		];
 		$post_type_object->template_lock = 'insert';
+
+		// The checkboxes look broken otherwise because the checkmark comes from dashicons.
+		wp_enqueue_style( 'dashicons' );
 	}
 
 

diff --git a/includes/template-functions.php b/includes/template-functions.php
@@ -725,7 +725,31 @@ function sensei_the_question_content() {
 	?>
 
 	<div class="wp-block-sensei-lms-question-answers">
-		<?php Sensei_Question::load_question_template( $question_type ); ?>
+		<?php
+			/**
+			 * Fires before the question answers are displayed inside the answers block.
+			 *
+			 * @hook sensei_quiz_question_answers_inside_before
+			 *
+			 * @since $$next-version$$
+			 *
+			 * @param {int} $question_id The ID of the question.
+			 */
+			do_action( 'sensei_quiz_question_answers_inside_before', $sensei_question_loop['current_question']->ID );
+
+			Sensei_Question::load_question_template( $question_type );
+
+			/**
+			 * Fires after the question answers are displayed inside the answers block.
+			 *
+			 * @hook sensei_quiz_question_answers_inside_after
+			 *
+			 * @since $$next-version$$
+			 *
+			 * @param {int} $question_id The ID of the question.
+			 */
+			do_action( 'sensei_quiz_question_answers_inside_after', $sensei_question_loop['current_question']->ID );
+		?>
 	</div>
 
 	<?php

diff --git a/templates/single-quiz/question-type-file-upload.php b/templates/single-quiz/question-type-file-upload.php
@@ -7,7 +7,7 @@
  * @author      Automattic
  * @package     Sensei
  * @category    Templates
- * @version     2.0.0
+ * @version     $$next-version$$
  */
 
 if ( ! defined( 'ABSPATH' ) ) {
@@ -22,6 +22,7 @@
  */
 $question_data = Sensei_Question::get_template_data( sensei_get_the_question_id(), get_the_ID() );
 
+$sensei_is_quiz_view_only_mode = $question_data['quiz_is_completed'] || ! Sensei_Quiz::is_quiz_available();
 ?>
 
 <?php if ( $question_data['question_helptext'] ) { ?>
@@ -35,7 +36,7 @@
 
 <?php if ( $question_data['answer_media_url'] && $question_data['answer_media_filename'] ) { ?>
 
-	<p class="submitted_file">
+	<p class="wp-block-sensei-lms-question-answers__filename">
 
 		<?php
 		printf(
@@ -48,6 +49,11 @@
 		?>
 
 	</p>
+
+	<?php if ( $sensei_is_quiz_view_only_mode && getimagesize( $question_data['answer_media_url'] ) ) { ?>
+		<img src="<?php echo esc_url( $question_data['answer_media_url'] ); ?>" class="wp-block-sensei-lms-question-answers__preview" />
+	<?php } ?>
+
 	<?php if ( ! $question_data['quiz_is_completed'] ) { ?>
 
 		<aside class="reupload_notice"><?php esc_html_e( 'Uploading a new file will replace your existing one:', 'sensei-lms' ); ?></aside>

diff --git a/templates/single-quiz/question-type-gap-fill.php b/templates/single-quiz/question-type-gap-fill.php
@@ -7,7 +7,7 @@
  * @author      Automattic
  * @package     Sensei
  * @category    Templates
- * @version     2.3.0
+ * @version     $$next-version$$
  */
 
 if ( ! defined( 'ABSPATH' ) ) {
@@ -19,18 +19,26 @@
  * All data is loaded in this array to keep the template clean.
  */
 $question_data = Sensei_Question::get_template_data( sensei_get_the_question_id(), get_the_ID() );
+
+$sensei_is_quiz_view_only_mode = $question_data['quiz_is_completed'] || ! Sensei_Quiz::is_quiz_available();
 ?>
 
 
 <p class="gapfill-answer">
 	<span class="gapfill-answer-pre">
 		<?php echo wp_kses_post( apply_filters( 'sensei_answer_text', esc_html( $question_data['gapfill_pre'] ) ) ); ?>
-		<input type="text" id="<?php echo esc_attr( 'question_' . $question_data['ID'] ); ?>"
-			name="<?php echo esc_attr( 'sensei_question[' . $question_data['ID'] . ']' ); ?>"
-			value="<?php echo esc_attr( $question_data['user_answer_entry'] ); ?>"
-			class="gapfill-answer-gap"
-			<?php echo $question_data['quiz_is_completed'] || ! Sensei_Quiz::is_quiz_available() ? 'disabled' : ''; ?>
-		/>
+		<?php if ( $sensei_is_quiz_view_only_mode ) { ?>
+			<span class="wp-block-sensei-lms-question-answers__answer">
+				<?php echo wp_kses_post( $question_data['user_answer_entry'] ); ?>
+			</span>
+		<?php } else { ?>
+			<input type="text" id="<?php echo esc_attr( 'question_' . $question_data['ID'] ); ?>"
+				name="<?php echo esc_attr( 'sensei_question[' . $question_data['ID'] . ']' ); ?>"
+				value="<?php echo esc_attr( $question_data['user_answer_entry'] ); ?>"
+				class="gapfill-answer-gap"
+				<?php echo $question_data['quiz_is_completed'] || ! Sensei_Quiz::is_quiz_available() ? 'disabled' : ''; ?>
+			/>
+		<?php } ?>
 		<span class="gapfill-answer-post">
 			<?php echo wp_kses_post( apply_filters( 'sensei_answer_text', esc_html( $question_data['gapfill_post'] ) ) ); ?>
 		</span>

diff --git a/templates/single-quiz/question-type-multi-line.php b/templates/single-quiz/question-type-multi-line.php
@@ -7,7 +7,7 @@
  * @author      Automattic
  * @package     Sensei
  * @category    Templates
- * @version     2.0.0
+ * @version     $$next-version$$
  */
 
 if ( ! defined( 'ABSPATH' ) ) {
@@ -20,9 +20,18 @@
  */
 $question_data = Sensei_Question::get_template_data( sensei_get_the_question_id(), get_the_ID() );
 
-Sensei_Utils::sensei_text_editor(
-	$question_data['user_answer_entry'],
-	'textquestion' . $question_data['ID'],
-	'sensei_question[' . $question_data['ID'] . ']'
-);
+$sensei_is_quiz_view_only_mode = $question_data['quiz_is_completed'] || ! Sensei_Quiz::is_quiz_available();
 
+if ( $sensei_is_quiz_view_only_mode ) {
+	?>
+	<div class="wp-block-sensei-lms-question-answers__answer">
+		<?php echo wp_kses_post( $question_data['user_answer_entry'] ); ?>
+	</div>
+	<?php
+} else {
+	Sensei_Utils::sensei_text_editor(
+		$question_data['user_answer_entry'],
+		'textquestion' . $question_data['ID'],
+		'sensei_question[' . $question_data['ID'] . ']'
+	);
+}
diff --git a/templates/single-quiz/question-type-single-line.php b/templates/single-quiz/question-type-single-line.php
@@ -7,7 +7,7 @@
  * @author      Automattic
  * @package     Sensei
  * @category    Templates
- * @version     2.0.0
+ * @version     $$next-version$$
  */
 
 if ( ! defined( 'ABSPATH' ) ) {
@@ -20,15 +20,23 @@
  */
 $question_data = Sensei_Question::get_template_data( sensei_get_the_question_id(), get_the_ID() );
 
+$sensei_is_quiz_view_only_mode = $question_data['quiz_is_completed'] || ! Sensei_Quiz::is_quiz_available();
+
 ?>
 
 <div class="answer">
 
-	<input type="text" id="<?php echo esc_attr( 'question_' . $question_data['ID'] ); ?>"
+	<?php if ( $sensei_is_quiz_view_only_mode ) { ?>
+		<div class="wp-block-sensei-lms-question-answers__answer">
+			<?php echo wp_kses_post( $question_data['user_answer_entry'] ); ?>
+		</div>
+	<?php } else { ?>
+		<input type="text" id="<?php echo esc_attr( 'question_' . $question_data['ID'] ); ?>"
 		name="<?php echo esc_attr( 'sensei_question[' . $question_data['ID'] . ']' ); ?>"
 		placeholder="<?php echo esc_attr__( 'Your answer', 'sensei-lms' ); ?>"
 		value="<?php echo esc_attr( $question_data['user_answer_entry'] ); ?>"
 		<?php echo $question_data['quiz_is_completed'] || ! Sensei_Quiz::is_quiz_available() ? 'disabled' : ''; ?>
 		/>
+	<?php } ?>
 
 </div>