I’m working on a React application that is a question bank. I’m having trouble implementing the program flow for reviewing the test for skipped or unanswered questions. I’m posting this questoin partly to get it written down and out of my head and maybe someone has an idea.
Here’s how it works.
An array of multiple choice questions is retrieved from the API
A counter starts at 0 and the first questionn is presented
The selected answer is stored in an selected answers array
The user presses “next” to move forward or “prev” to move back, and counter is updated accordingly. As long as there is no score (doesn’t happen until all questions are answered), the conditional rendering will present the next quiz question according to the counter.
If the question is skipped there is a null entry in the selected answers array
At the end of the quiz the user can manually go back through the test, but I’d like a foolproof way for them to see and review unanswered questions.
So when they hit “Score”, a function checks for unanswered questions.
If there are no unanswered questions the score is calculated
If there ARE unanswered questions…this is where I get stuck.
Say I have an array: [3,5] meaning that questions 3 & 5 are unanswered.
I can update the counter to the first array element, and that triggers a re-rendering of that question.
I would like the “next” button to change to a “next unanswered” button, where question 5 would be presented.
My problem is with the conditional rendering of the following things:
the Quiz (one mode is sequential 1 through 20, the other mode is review in nwhich it just does the unanswered ones)
the Score
the Review showing unanswerd questions
Right now my rendner logic for the App looks like this. This doesn’t work exactly as I like but you can see how complicated it is getting. I’m wondering if this ternary codnitional is the right way to do this, or if I need a new state to track things. I’m using a state mode called “reviewMode” that is true or false.
This is the rendering logic without the review mode:
{this.state.score >= 0 ? this.renderResult() : this.renderQuiz() }
This is the rendner logic attempting to incoprirate review mode:
{ (this.state.unansweredQuestions.length > 0 && this.state.reviewMode === false )? this.renderReview() : ( this.state.score >= 0 ? this.renderResult() : this.renderQuiz())}
It’s worth nothing that unansweredQuestions is zero length until the score button pressed. And score is empty until there are no unaswered questions and score is pressed.
This may be complete rambling…I’ll put up a link to the git hub source in a bit when I get the repository made. If nothign else I can refer back to this for my own sanity or to see where my logic may be faulty.