Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

revealAnswerOnSubmit not working correctly #86

Open
SaadBazaz opened this issue Jan 6, 2023 · 5 comments
Open

revealAnswerOnSubmit not working correctly #86

SaadBazaz opened this issue Jan 6, 2023 · 5 comments

Comments

@SaadBazaz
Copy link

Hey!
I want the quiz to show the right answer (as instant feedback) immediately when clicked.
i.e. if user selects any answer, the correct answer should be highlighted.

I assume that the property revealAnswerOnSubmit={true} should do this operation, but it doesn't seem to work.

Result upon clicking: nothing is highlighted at all!

@wingkwong
Copy link
Owner

Thanks for reporting. Will take a look.

@wingkwong
Copy link
Owner

I think that is not the case. revealAnswerOnSubmit={true} means the answers will be shown after you submit the quiz, i.e. finishing all questions. It seems what you said is missing currently.

@SaadBazaz
Copy link
Author

How can I achieve this with the current code? It's a really necessary feature

@SaadBazaz
Copy link
Author

I've edited Core.js to achieve it. In the function renderAnswers, I've edited this following line.

...
<Fragment key={index}>
        {(buttons[index] !== undefined)
          ? (
            <button
              type="button"
              disabled={buttons[index].disabled || false}
              className={`${buttons[index].className} ${showCorrectAnswer && `${index + 1}` === correctAnswer ? "correct" : ""} answerBtn btn`}
              // notice the showCorrectAnswer ternary
              onClick={() => (revealAnswerOnSubmit ? onSelectAnswer(index) : onClickAnswer(index))}
            >
              {questionType === 'text' && <span>{numberToCharacter(index)}. {answer}</span>}
              {questionType === 'photo' && <img src={answer} alt="image" />}
            </button>
          )
...

Obviously I added showCorrectAnswer as a boolean prop to both Quiz and Core.

@wingkwong
Copy link
Owner

Can you make a PR?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants