Radio button issues with multiple-choice quiz - html

Question

I'm making a website where you can make quizzes and answer them. My issue is that when I try to answer my quiz, to see whether the answer is correct or incorrect, the result I get is not exactly what I want.
I'm creating my html page by loading a json and assigning a radio button to every answer. The structure is that a quiz can have many questions, and questions can have many answers.
HTML:
<table class="pageTable" align="center">
<!-- Quiz title -->
<div *ngFor="let quiz of quizToDisplay"><br/>
Quiz title: {{quiz.title}} <br/> by {{quiz.owner}}<br/><br/>
<!-- Quiz questions -->
<div *ngFor="let quizQuestions of quiz.questions" align="center">
<div class="Question-panel-title" style="padding: 10px; word-wrap: break-word;">
Question: {{quizQuestions.questionText}}
</div>
<!-- Quiz answers -->
<div class="Question-panel-content" style="padding: 5px; word-wrap: break-word;">
<div *ngIf="quizQuestions.types == 'Multiple-choice'" >
<div *ngFor="let quizAnswers of quizQuestions.answers; let i=index">
<input type="radio" id="rawr" name="{{quizQuestions.questionText}}" value="{{quizAnswers.correctAnswer}}" [disabled]="submitted">
{{i + 1}}: {{quizAnswers.answerText}}
</div>
<div *ngIf="submitted == true">
Your answer is {{correctAnswerMultipleChoice}}
</div>
</div>
<div *ngIf="quizQuestions.types == 'Checkboxes'">
<div *ngFor="let quizAnswers of quizQuestions.answers; let i=index">
<input type="checkbox" name="checkboxGroup" value="{{quizAnswers.correctAnswer}}" [disabled]="submitted" (click)="handleCheckboxAnswer(i, quizAnswers.correctAnswer)">
{{i + 1}}: {{quizAnswers.answerText}}
</div>
<div *ngIf="submitted == true">
Your answer is {{correctAnswerCheckbox}}
</div>
</div>
</div><br/>
</div>
<input type="submit" value="Submit" (click)="submitAnswer()">
<input type="submit" value="View Statistics">
<div *ngIf="quiz.owner == currentUser">
<input type="submit" value="Delete Quiz" (click)="deleteQuiz(quiz.id)">
</div>
</div>
Code:
export class QuizComponent implements OnInit, OnDestroy {
service: any;
data: any;
quizToDisplay: any;
currentUser: string;
correctAnswerMultipleChoice: string = 'Incorrect';
CheckboxesValues: string[] = [];
correctAnswerCheckbox: string = 'Incorrect';
submitted: boolean = false;
answersArray: any[] = [];
constructor(private router:Router, private quizObserverService:QuizObserverService, private socketService:SocketService, private elementRef:ElementRef){
this.currentUser = localStorage.getItem('user');
}
ngOnInit() {
this.service = this.quizObserverService.getQuiz(this.router.url).subscribe(data => { //only gets JSON upon page load
this.quizToDisplay = data;
})
}
ngOnDestroy() {
this.service.unsubscribe();
}
deleteQuiz(id: string){
this.socketService.socket.emit('deleteQuiz', JSON.stringify(id));
this.router.navigateByUrl('/home');
}
handleMultiplechoiceAnswer(){
let rawr = this.elementRef.nativeElement.querySelectorAll('#rawr');
for(let i = 0; i < this.quizToDisplay[0].questions.length; i++){
if(this.quizToDisplay[0].questions[i].types == "Multiple-choice"){
for(let j = 0; j < this.quizToDisplay[0].questions[i].answers.length; j++){
this.answersArray.push(this.quizToDisplay[0].questions[i].answers[j]);
}
}
}
if(this.handleMultiplechoiceAnswerCorrect(rawr)){
return this.handleMultiplechoiceAnswerCorrect(rawr);
}
else
{
return this.handleMultiplechoiceAnswerIncorrect(rawr);
}
}
handleMultiplechoiceAnswerCorrect(rawr: any){
for(let k = 0; k < rawr.length; k++){
if(this.answersArray[k].correctAnswer == rawr[k].value && rawr[k].value == "Correct" && rawr[k].checked == true){
return "Correct";
}
}
}
handleMultiplechoiceAnswerIncorrect(rawr: any){
return "Incorrect";
}
handleCheckboxAnswer(index: number, correct: string) {
this.CheckboxesValues[index] = correct;
}
submitAnswer(){
this.submitted = true;
this.correctAnswerMultipleChoice = this.handleMultiplechoiceAnswer();
}
When I try to answer my quiz, this is what the result looks like:
Image
As you can see, even though the second question is answered wrong, it still says that it is correct, because the first question is answered correctly. The method I'm using to determine whether the quiz is correct or false is the handleMultiplechoiceAnswer() method, so I think something is wrong in that method, however I can't pick my finger on it. Thanks for the help.
EDIT:
Very sorry, I forgot to put an example of my json structure. Here it is:
{
"id": "32bec4d6-b5fd-4360-bede-9c902abd95de",
"title": "random quiz",
"owner": "mohemohe",
"questions": [
{
"questionText": "Choose numbers above 10",
"answers": [
{
"answerText": "9",
"correctAnswer": "Incorrect"
},
{
"answerText": "11",
"correctAnswer": "Correct"
}
],
"types": "Multiple-choice"
},
{
"questionText": "Which website is this?",
"answers": [
{
"answerText": "stackoverflow",
"correctAnswer": "Correct"
},
{
"answerText": "google",
"correctAnswer": "Incorrect"
}
],
"types": "Multiple-choice"
}
],
"access": "Public"
}
EDIT 2:
Managed to make a plunker example: https://plnkr.co/edit/CoV1AQtVtbbS2kNYK7FR

Answer 1

The solve:
I think that the reason why this is always returning true / 'Correct' is because of the if statement evaluating it:
if(this.answersArray[k].correctAnswer == rawr[k].value && rawr[k].value == "Correct" && rawr[k].checked == true){...}
If we break this down...
this.answersArray[k].correctAnswer == rawr[k].value
rawr[k].value == "Correct"
rawr[k].checked == true
Instantly you can see that you are expecting rawr[k].value to equal both correctAnswer AND 'Correct'. Because the result is always returning true, this means that this.answersArray[k].correctAnswer == 'Correct'.
So this essentially negates the first 2 conditions in your if statement - so essentially your if statement becomes... if(rawr[k].checked == true).
Just FYI there is absolutely no need for even checking rawr[k].checked == true if you swap querySelectorAll('#rawr'); to querySelectorAll('#rawr:checked');
The following is just general feedback:
I think that you really need to consider re-working this entire script. It is very hard to read, highly un-optomised and needs to be refactored into a more robust approach.
First I would recommend creating a variable to store the currentQuestion so that you don't have to do quizToDisplay[0] every single time.
var currentQuestion: any;
ngOnInit(){
....
this.quizToDisplay = data;
this.currentQuestion = this.quizToDisplay[0];
}
Or at the very least... this.quizToDisplay = data[0]
Go and check out es6 array methods.
for(let i = 0; i < this.quizToDisplay[0].questions.length; i++){
if(this.quizToDisplay[0].questions[i].types == "Multiple-choice"){
for(let j = 0; j < this.quizToDisplay[0].questions[i].answers.length; j++){
this.answersArray.push(this.quizToDisplay[0].questions[i].answers[j]);
}
}
}
Can be transmutted into the following which is much easier to read:
this.quizToDisplay[0].questions.forEach((questionGroup, i)=>{
if(questionGroup.types == "Multiple-choice"){
questionGroup.forEach((question, ii)=>{
this.answersArray.push(question.answers[ii]);
});
}
});
Why not just include the feedback string in the json for each question? That way you can do something like the following and mitigate any future requirements that the feedback string is unique for a particular question:
<div *ngIf="submitted == true">
<p *ngIf="correct" class="correct-colour">{{quizAnswers.correctFeedback}}</p>
<p *ngIf="!correct" class="incorrect-colour">{{quizAnswers.incorrectFeedback}}</p>
</div>
I think that the naming conventions need to be improved. for example: quizQuestions.answers should be quizQuestions.options.
Don't forget that as you are using an object, you have the ability to assign new object properties "on the fly". For example you could do:
this.quizToDisplay[0]['answeredCorrectly'] = true;
I would strongly recommend creating a click event on your <input> so that you can trap the selected options more effectively. Using the above methodology you could...
// .html
<input ... (click)="optionClicked(option)">
// .ts
optionClicked(_option: Object){
quizQuestions['clicked'] = !quizQuestions['clicked'] || true;
}
If you ever want future code review, try codereview.stackexchange.com

Answer 2

{
"id": "32bec4d6-b5fd-4360-bede-9c902abd95de",
"title": "random quiz",
"owner": "mohemohe",
"questions": [
{
"questionText": "Choose numbers above 10",
"answers": [
{
"answerText": "9",
"correctAnswer": "Incorrect"
},
{
"answerText": "11",
"correctAnswer": "Correct"
}
],
"types": "Multiple-choice"
},
{
"questionText": "Which website is this?",
"answers": [
{
"answerText": "stackoverflow",
"correctAnswer": "Correct"
},
{
"answerText": "google",
"correctAnswer": "Incorrect"
}
],
"types": "Multiple-choice"
}
],
"access": "Public"
}