!
-
Note that selecting an option does NOT save your answer to the current question. Click on "Save >" to save your answer for the current question and then go to the next question.
+
Note that selecting an option does NOT save your answer to the current question. Click on "Save & Next" to save your answer for the current question and then go to the next question.
diff --git a/src/components/Questions/Footer.vue b/src/components/Questions/Footer.vue
index 73df3aa..9b8db49 100644
--- a/src/components/Questions/Footer.vue
+++ b/src/components/Questions/Footer.vue
@@ -59,7 +59,7 @@
}"
:titleConfig="markForReviewButtonTitleConfig"
:buttonClass="markForReviewButtonClass"
- :isDisabled="isAnswerSubmitted || isSessionAnswerRequestProcessing"
+ :isDisabled="isAnswerSubmitted || isSessionAnswerRequestProcessing || isMarkedForReview"
@click="toggleMarkForReview"
data-test="markForReviewButton"
>
@@ -107,6 +107,8 @@ import {
toRefs,
computed,
PropType,
+ onMounted,
+ onBeforeUnmount
} from "vue";
export default defineComponent({
@@ -155,6 +157,10 @@ export default defineComponent({
},
setup(props, context) {
const isQuizAssessment = computed(() => props.quizType == "assessment" || props.quizType == "omr-assessment");
+ const isSmallScreen = ref(false);
+ const updateScreenSize = () => {
+ isSmallScreen.value = window.matchMedia("(max-width: 500px)").matches;
+ };
const state = reactive({
assessmentNavigationButtonIconClass: [
{
@@ -215,12 +221,12 @@ export default defineComponent({
} as IconButtonTitleConfig);
const markForReviewButtonTitleConfig = computed(() => ({
- value: props.isMarkedForReview ? "Clear Review" : "Mark For Review",
+ value: isSmallScreen.value ? "Review >" : "Mark For Review & Next",
class: ["text-xxs bp-500:text-sm lg:text-base xl:text-lg font-bold", "text-violet-500"],
} as IconButtonTitleConfig));
const saveAndNextButtonTitleConfig = ref({
- value: "Save >",
+ value: "Save & Next",
class: [state.assessmentTextButtonTitleClass, "text-emerald-500"],
} as IconButtonTitleConfig);
@@ -243,10 +249,15 @@ export default defineComponent({
}
function toggleMarkForReview() {
- if (props.isMarkedForReview) {
- context.emit("clear-review");
- } else {
+ if (!props.isMarkedForReview) {
context.emit("mark-for-review");
+ // wait for processing to be done and answer to be submitted
+ const checkProcessingDone = setInterval(() => {
+ if (!props.isSessionAnswerRequestProcessing) {
+ if (props.continueAfterAnswerSubmit) context.emit("continue");
+ clearInterval(checkProcessingDone);
+ }
+ }, 100); // check every 100ms
}
}
@@ -296,6 +307,16 @@ export default defineComponent({
"p-4 px-8 bp-500:p-6 bp-500:px-12 rounded-2xl shadow-xl disabled:opacity-50 disabled:cursor-not-allowed",
]);
+ // Setup listeners for screen size changes
+ onMounted(() => {
+ updateScreenSize();
+ window.addEventListener("resize", updateScreenSize);
+ });
+
+ onBeforeUnmount(() => {
+ window.removeEventListener("resize", updateScreenSize);
+ });
+
return {
...toRefs(state),
previousQuestionButtonIconConfig,
@@ -319,6 +340,6 @@ export default defineComponent({
isQuizAssessment,
};
},
- emits: ["submit", "previous", "continue", "clear", "mark-for-review", "clear-review"],
+ emits: ["submit", "previous", "continue", "clear", "mark-for-review"],
});
diff --git a/src/components/Questions/Palette/Review.vue b/src/components/Questions/Palette/Review.vue
index 6a4d6d1..7c55868 100644
--- a/src/components/Questions/Palette/Review.vue
+++ b/src/components/Questions/Palette/Review.vue
@@ -3,7 +3,7 @@
:title="title"
:hasQuizEnded="hasQuizEnded"
iconName="skip-rounded"
- iconClass="bg-violet-100 border-violet-600"
+ iconClass="bg-violet-300 border-violet-600"
>
diff --git a/src/components/Questions/QuestionModal.vue b/src/components/Questions/QuestionModal.vue
index 52491ed..39997d7 100644
--- a/src/components/Questions/QuestionModal.vue
+++ b/src/components/Questions/QuestionModal.vue
@@ -85,7 +85,6 @@
@previous="showPreviousQuestion"
@clear="clearAnswer"
@mark-for-review="markForReviewQuestion"
- @clear-review="clearReviewQuestion"
data-test="footer"
>
@@ -255,7 +254,7 @@ export default defineComponent({
state.toast.warning(
`You have already attempted maximum allowed (${props.maxQuestionsAllowedToAttempt}) questions in current section (Q.${props.qsetIndexLimits.low + 1} - Q.${props.qsetIndexLimits.high}).
-To attempt this question, unselect an answer to another question in this section.
+To attempt Q.${props.currentQuestionIndex + 1}, unselect an answer to another question in this section.
`,
{
position: POSITION.TOP_CENTER,
@@ -339,7 +338,7 @@ To attempt this question, unselect an answer to another question in this section
state.previousLocalResponse = clonedeep(state.localResponses[props.currentQuestionIndex]);
state.localResponses[props.currentQuestionIndex].marked_for_review = true;
state.toast.info(
- `Question ${props.currentQuestionIndex + 1} marked for review!`,
+ `Question ${props.currentQuestionIndex + 1} is marked for review!`,
{
position: POSITION.TOP_LEFT,
timeout: 2000
@@ -348,12 +347,6 @@ To attempt this question, unselect an answer to another question in this section
context.emit("update-review-status")
}
- function clearReviewQuestion() {
- state.previousLocalResponse = clonedeep(state.localResponses[props.currentQuestionIndex]);
- state.localResponses[props.currentQuestionIndex].marked_for_review = false;
- context.emit("update-review-status")
- }
-
function showNextQuestion() {
// It toggles the reRenderKey from 0 to 1 or 1 to 0. And changing the reRender key, re-renders the component.
// we reRender the whole component as textarea is holding the details which is not getting updated
@@ -400,7 +393,7 @@ To attempt this question, unselect an answer to another question in this section
currentQuestionResponseAnswer.value
}
state.isDraftAnswerCleared = false
- state.toast.clear() // if toast exists in current state, clear when you switch state
+ // state.toast.clear() // if toast exists in current state, clear when you switch state
}
function numericalAnswerUpdated(answer: number | null) {
@@ -578,7 +571,6 @@ Click on the Question Palette to view unanswered questions before submitting the
subjectiveAnswerUpdated,
clearAnswer,
markForReviewQuestion,
- clearReviewQuestion,
endTest,
endTestByTime,
navigateToQuestion,
diff --git a/tailwind.config.js b/tailwind.config.js
index 46fcfc6..05778c5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,7 +14,7 @@ module.exports = {
1: "1px",
},
fontSize: {
- xxs: "0.65rem",
+ xxs: "0.80rem",
},
},
screens: {