Merge pull request #191 from wingkwong/develop

0.7.1 Release

Author: wingkwong

CHANGELOG.md

@@ -1,23 +1,29 @@
 # CHANGELOG
 
+## 0.7.1
+
+- Bumped dependencies
+- Fixed duplicate question on shuffle
+- Fixed missing correct answers when setting showInstantfeedback to true
+
 ## 0.7.0
 
-- Fix lint issues
-- Refactor webpack, filter design
-- Update demo site
-- Add rollup
-- Bump dependencies
+- Fixed lint issues
+- Refactored webpack, filter design
+- Updated demo site
+- Added rollup
+- Bumped dependencies
 
 ## 0.6.0
 
-- Display marks in questions (marksOfQuestion)
-- Bump dependencies
-- Add renovate
-- Add ShuffleAnswer
-- Add total count of questions
+- Displayed marks in questions (marksOfQuestion)
+- Bumped dependencies
+- Added renovate
+- Added ShuffleAnswer
+- Added total count of questions
 - Responsive Design
-- Revise demo site
-- Fix Scrolling
+- Revised demo site
+- Fixed Scrolling
 
 ## 0.5.1
 

dist/index.es.js

@@ -1,6 +1,6 @@
 {
   "name": "react-quiz-component",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "React Quiz Component",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -37,7 +37,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "html-webpack-plugin": "5.5.3",
+    "html-webpack-plugin": "5.6.0",
     "mini-css-extract-plugin": "^2.7.6",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "prop-types": "^15.7.2",

dist/index.js

@@ -15,7 +15,7 @@ function App() {
         quiz={quiz}
         shuffle
         shuffleAnswer
-      // showInstantFeedback
+        showInstantFeedback
       // continueTillCorrect
         onComplete={setQuizResult}
         onQuestionSubmit={(obj) => console.log('user question results:', obj)}

docs/bundle.js

@@ -37,7 +37,7 @@ function Core({
 
   useEffect(() => {
     setActiveQuestion(questions[currentQuestionIndex]);
-  }, [currentQuestionIndex]);
+  }, [currentQuestionIndex, questions]);
 
   useEffect(() => {
     const { answerSelectionType } = activeQuestion;
@@ -166,6 +166,18 @@ function Core({
     );
   };
 
+  const isCorrectCheck = (index, correctAnswerIndex) => {
+    if (typeof correctAnswerIndex === 'string') {
+      return index === Number(correctAnswerIndex);
+    }
+
+    if (typeof correctAnswerIndex === 'object') {
+      return correctAnswerIndex.find((element) => element === index) !== undefined;
+    }
+
+    return false;
+  };
+
   const renderQuizResultQuestions = useCallback(() => {
     let filteredQuestions;
     let filteredUserInput;
@@ -205,7 +217,7 @@ function Core({
       answers, correctAnswer, questionType, questionIndex,
     } = question;
     let { answerSelectionType } = question;
-    const onClickAnswer = (index) => checkAnswer(index + 1, correctAnswer, answerSelectionType, {
+    const onClickAnswer = (index) => checkAnswer(index + 1, correctAnswer, answerSelectionType, answers, {
       userInput,
       userAttempt,
       currentQuestionIndex,
@@ -255,7 +267,11 @@ function Core({
             <button
               type="button"
               disabled={answerButtons[index].disabled || false}
-              className={`${answerButtons[index].className} answerBtn btn`}
+              className={`${answerButtons[index].className} answerBtn btn ${
+                isCorrectCheck(index + 1, correctAnswer) && showInstantFeedback
+                  ? 'correct'
+                  : ''
+              }`}
               onClick={() => (revealAnswerOnSubmit ? onSelectAnswer(index) : onClickAnswer(index))}
             >
               {questionType === 'text' && <span>{answer}</span>}

package-lock.json

@@ -6,7 +6,7 @@ export const rawMarkup = (data) => {
   return { __html: snarkdown(sanitizer(data)) };
 };
 
-export const checkAnswer = (index, correctAnswer, answerSelectionType, {
+export const checkAnswer = (index, correctAnswer, answerSelectionType, answers, {
   userInput,
   userAttempt,
   currentQuestionIndex,
@@ -125,6 +125,15 @@ export const checkAnswer = (index, correctAnswer, answerSelectionType, {
         }
       }
 
+      for (let i = 0; i < answers.length; i += 1) {
+        if (correctAnswer.includes(i + 1)) {
+          setButtons((prevState) => ({
+            ...prevState,
+            [i]: {},
+          }));
+        }
+      }
+
       if (cnt === maxNumberOfMultipleSelection) {
         correct.push(currentQuestionIndex);
 
@@ -210,6 +219,7 @@ export const selectAnswer = (index, correctAnswer, answerSelectionType, {
 
     if (userInputCopy[currentQuestionIndex].length === correctAnswer.length) {
       let exactMatch = true;
+      // eslint-disable-next-line no-restricted-syntax
       for (const input of userInput[currentQuestionIndex]) {
         if (!correctAnswer.includes(input)) {
           exactMatch = false;