From 22e31e28aab66deb514d2aa62150a8ad80977151 Mon Sep 17 00:00:00 2001 From: kesharibhai84 Date: Wed, 14 Aug 2024 20:37:44 +0530 Subject: [PATCH 1/6] bug: error message for alphabets and multiple decimals --- src/components/Omr/OmrItem.vue | 846 +++++++++++++++++++-------------- 1 file changed, 493 insertions(+), 353 deletions(-) diff --git a/src/components/Omr/OmrItem.vue b/src/components/Omr/OmrItem.vue index 2b78c8a..f8dec0c 100644 --- a/src/components/Omr/OmrItem.vue +++ b/src/components/Omr/OmrItem.vue @@ -1,133 +1,135 @@ + + - + From 61bd44edcb6ce3a4b59e49016e5cffe5f59ea46c Mon Sep 17 00:00:00 2001 From: kesharibhai84 Date: Tue, 20 Aug 2024 01:50:17 +0530 Subject: [PATCH 2/6] bug:fixed bodu.vue --- src/components/Questions/Body.vue | 94 ++++++++++++++++++++++++++----- 1 file changed, 81 insertions(+), 13 deletions(-) diff --git a/src/components/Questions/Body.vue b/src/components/Questions/Body.vue index a2c5d21..c671e25 100644 --- a/src/components/Questions/Body.vue +++ b/src/components/Questions/Body.vue @@ -521,40 +521,108 @@ export default defineComponent({ } function preventKeypressIfApplicable(event: InputEvent) { + function showErrorNotification(message: string) { + const notification = document.createElement("div"); + notification.className = "error-notification"; + notification.innerText = message; + + // Styling the notification + Object.assign(notification.style, { + position: "fixed", + bottom: "20px", + right: "20px", + backgroundColor: "#f44336", + color: "white", + padding: "10px", + borderRadius: "5px", + boxShadow: "0 2px 10px rgba(0,0,0,0.2)", + zIndex: 1000, + }); + + document.body.appendChild(notification); + + // Automatically remove the notification after 3 seconds + setTimeout(() => { + notification.remove(); + }, 3000); + } + if (event.data == null) { // prevent "Enter" key in android browser decimal keypad mode - if (event.inputType == "insertLineBreak") event.preventDefault() + if (event.inputType == "insertLineBreak") event.preventDefault(); // in other cases, return to escape null type error - return + return; } + + const isAlphabet = /[a-zA-Z]/.test(event.data); // Check if the input is an alphabet + + if (isAlphabet) { + console.error("Alphabets are not allowed !"); + showErrorNotification("Alphabets are not allowed !"); + event.preventDefault(); + return; + } + if (isQuestionTypeSubjective.value) { // checks if character limit is reached in case it is set - if (!hasCharLimit.value) return + if (!hasCharLimit.value) return; if (!charactersLeft.value) { - event.preventDefault() - return + event.preventDefault(); + return; } } if (isQuestionTypeNumericalFloat.value) { - const keysAllowed: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'] - const keyPressed: string = event.data + const keysAllowed: string[] = [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7", + "8", + "9", + ".", + ]; + const keyPressed: string = event.data; if ( doNumericalCharactersExceedLimit(state.numericalAnswer) || !keysAllowed.includes(keyPressed) || // if key is "." but number already has a decimal point, or key "." is entered as the first character in answer, prevent (event.data == "." && - (doesNumberContainDecimal(state.numericalAnswer) || state.numericalAnswer == null)) + (doesNumberContainDecimal(state.numericalAnswer) || + state.numericalAnswer == null)) ) { - event.preventDefault() + if ( + event.data == "." && + doesNumberContainDecimal(state.numericalAnswer) + ) { + console.error("Decimal point is already present !"); + showErrorNotification("You've already entered decimal point !"); + } + event.preventDefault(); } } if (isQuestionTypeNumericalInteger.value) { - const keysAllowed: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'] - const keyPressed: string = event.data + const keysAllowed: string[] = [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7", + "8", + "9", + ]; + const keyPressed: string = event.data; if ( doNumericalCharactersExceedLimit(state.numericalAnswer) || - !keysAllowed.includes(keyPressed)) { - event.preventDefault() + !keysAllowed.includes(keyPressed) + ) { + event.preventDefault(); } } } From d2dc2116bf55319d580309672504b5479d313acf Mon Sep 17 00:00:00 2001 From: kesharibhai84 Date: Tue, 20 Aug 2024 02:05:50 +0530 Subject: [PATCH 3/6] You have already entered a decimal point! --- src/components/Omr/OmrItem.vue | 8 ++++---- src/components/Questions/Body.vue | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/Omr/OmrItem.vue b/src/components/Omr/OmrItem.vue index f8dec0c..6fbd34f 100644 --- a/src/components/Omr/OmrItem.vue +++ b/src/components/Omr/OmrItem.vue @@ -513,8 +513,8 @@ export default defineComponent({ const isAlphabet = /[a-zA-Z]/.test(event.data); // Check if the input is an alphabet if (isAlphabet) { - console.error("Alphabets are not allowed !"); - showErrorNotification("Alphabets are not allowed !"); + console.error("Alphabets are not allowed!"); + showErrorNotification("Alphabets are not allowed!"); event.preventDefault(); return; } @@ -554,8 +554,8 @@ export default defineComponent({ event.data == "." && doesNumberContainDecimal(state.numericalAnswer) ) { - console.error("Decimal point is already present !"); - showErrorNotification("You've already entered decimal point !"); + console.error("You have already entered a decimal point!"); + showErrorNotification("You have already entered a decimal point!"); } event.preventDefault(); } diff --git a/src/components/Questions/Body.vue b/src/components/Questions/Body.vue index c671e25..cdd97f2 100644 --- a/src/components/Questions/Body.vue +++ b/src/components/Questions/Body.vue @@ -557,8 +557,8 @@ export default defineComponent({ const isAlphabet = /[a-zA-Z]/.test(event.data); // Check if the input is an alphabet if (isAlphabet) { - console.error("Alphabets are not allowed !"); - showErrorNotification("Alphabets are not allowed !"); + console.error("Alphabets are not allowed!"); + showErrorNotification("Alphabets are not allowed!"); event.preventDefault(); return; } @@ -598,8 +598,8 @@ export default defineComponent({ event.data == "." && doesNumberContainDecimal(state.numericalAnswer) ) { - console.error("Decimal point is already present !"); - showErrorNotification("You've already entered decimal point !"); + console.error("You have already entered a decimal point!"); + showErrorNotification("You have already entered a decimal point!"); } event.preventDefault(); } From bb9fb1c63080909d9a7d1755f9560c2f872a8496 Mon Sep 17 00:00:00 2001 From: kesharibhai84 Date: Thu, 22 Aug 2024 13:13:45 +0530 Subject: [PATCH 4/6] bug:e2e for chrome mobile --- src/components/Omr/OmrItem.vue | 2 +- src/components/Questions/Body.vue | 2 +- .../specs/renders-player-to-check-optional.js | 24 ++++++++++++------- 3 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/components/Omr/OmrItem.vue b/src/components/Omr/OmrItem.vue index 6fbd34f..c281dc2 100644 --- a/src/components/Omr/OmrItem.vue +++ b/src/components/Omr/OmrItem.vue @@ -485,7 +485,7 @@ export default defineComponent({ // Styling the notification Object.assign(notification.style, { position: "fixed", - bottom: "20px", + bottom: "80px", right: "20px", backgroundColor: "#f44336", color: "white", diff --git a/src/components/Questions/Body.vue b/src/components/Questions/Body.vue index cdd97f2..50e93e9 100644 --- a/src/components/Questions/Body.vue +++ b/src/components/Questions/Body.vue @@ -529,7 +529,7 @@ export default defineComponent({ // Styling the notification Object.assign(notification.style, { position: "fixed", - bottom: "20px", + bottom: "80px", right: "20px", backgroundColor: "#f44336", color: "white", diff --git a/tests/e2e/specs/renders-player-to-check-optional.js b/tests/e2e/specs/renders-player-to-check-optional.js index e458e15..db983ac 100644 --- a/tests/e2e/specs/renders-player-to-check-optional.js +++ b/tests/e2e/specs/renders-player-to-check-optional.js @@ -139,19 +139,27 @@ describe("Player for Assessment quizzes", () => { ); }); - it("once scorecard displayed, number of skipped questions should not consider optional questions", () => { + it("check if scorecard eventually becomes visible", () => { + // Remove or hide any toast notifications + cy.get(".Vue-Toastification__toast-body").should("not.exist"); + + // Interact with the endTestButton cy.get('[data-test="modal"]') - .get('[data-test="endTestButton"]') - .trigger("click"); + .find('[data-test="endTestButton"]') + .click(); - // additional click to protect endTest button + // Additional check to ensure the button click was successful cy.get('[data-test="modal"]') - .get('[data-test="endTestButton"]') - .trigger("click"); + .find('[data-test="endTestButton"]') + .click(); + + // Wait for the scorecard to become visible + cy.get('[data-test="scorecard"]').should("be.visible"); + // Verify the text of the metricValue-2 cy.get('[data-test="scorecard"]') - .get('[data-test="metricValue-2"]') - .should("have.text", 12); // 12 in first qset, none in 2nd qset + .find('[data-test="metricValue-2"]') + .should("have.text", "12"); // Ensure the text is a string }); }); }); From dd2b17b50da201f5db4e93d7310abb96735f094f Mon Sep 17 00:00:00 2001 From: kesharibhai84 Date: Fri, 23 Aug 2024 02:51:59 +0530 Subject: [PATCH 5/6] bug:button position shifting and its disappearance --- src/components/Omr/OmrItem.vue | 16 +- src/components/Questions/Body.vue | 520 ++++++++++++++++++------------ 2 files changed, 324 insertions(+), 212 deletions(-) diff --git a/src/components/Omr/OmrItem.vue b/src/components/Omr/OmrItem.vue index c281dc2..931212e 100644 --- a/src/components/Omr/OmrItem.vue +++ b/src/components/Omr/OmrItem.vue @@ -478,6 +478,12 @@ export default defineComponent({ function preventKeypressIfApplicable(event: InputEvent) { function showErrorNotification(message: string) { + const existingNotification = document.querySelector( + ".error-notification" + ); + if (existingNotification) { + existingNotification.remove(); + } const notification = document.createElement("div"); notification.className = "error-notification"; notification.innerText = message; @@ -485,14 +491,18 @@ export default defineComponent({ // Styling the notification Object.assign(notification.style, { position: "fixed", - bottom: "80px", - right: "20px", + bottom: "90px", // Adjusted distance from the bottom to avoid UI elements + left: "50%", + transform: "translateX(-70%)", // Center horizontally backgroundColor: "#f44336", color: "white", padding: "10px", borderRadius: "5px", boxShadow: "0 2px 10px rgba(0,0,0,0.2)", zIndex: 1000, + maxWidth: "90%", // Ensure it does not exceed screen width + textAlign: "center", + boxSizing: "border-box", }); document.body.appendChild(notification); @@ -500,7 +510,7 @@ export default defineComponent({ // Automatically remove the notification after 3 seconds setTimeout(() => { notification.remove(); - }, 3000); + }, 2000); } if (event.data == null) { diff --git a/src/components/Questions/Body.vue b/src/components/Questions/Body.vue index 50e93e9..88ad436 100644 --- a/src/components/Questions/Body.vue +++ b/src/components/Questions/Body.vue @@ -22,10 +22,18 @@
- -

- -

+ +

+ +

@@ -171,45 +179,90 @@ :class="answerContainerClass" data-test="matrixMatchContainer" > -
    -
  • - - - - - - - - - - - - + + + + + + + +
    {{ getColumnLabel(columnIndex) }}
    {{ getRowLabel(rowIndex) }} -
    +
  • + + + + + + - -
    - - - -
    -
    • - - -
    +
    + {{ getRowLabel(rowIndex) }} + +
    + +
    +
    +
    • +
+ +
-
-

Solution:

-

-
+
+

Solution:

+

+