I'm Helping Some Kids Learn with Quizzes. Now I Need Your Help with this Javascript Code. Please

JavaScript
1

Hi guys, please I need help with this Javascript Code for a Quiz I’m using to help some kids learn fast and attain mastery in some subjects.

I saw the code on github and the person who created is no longer available to help me out with it. I came here because I’m optimistic I will get answers. Thanks in advance.
Check out the code here on: CodePen

What I want are:

  1. There should NOT be a ‘Check Answer’ button
  2. User selects an option and sees the explanation immediately without having to click any button
  3. There should be a ‘Next’ button in every question except the last [Clicking ‘Next’ should lead to the next question]
  4. User can skip any question by just clicking the ‘Next’ button
  5. There should be a ‘Submit’ button (under the ‘Next’ button) in every question [Clicking ‘Submit’ should End the quiz and Return user’s score and percentage]
  6. At the end of the quiz, there should be a ‘Summary’ button which shows details of the user’s performance, showing questions with the answers selected and whether those answers are correct (in green with a check symbol, :ballot_box_with_check:) or wrong (in red with an ☒) together with the correct answers if the user is wrong. Where the user skips the question, there should be a message in bracket, (you skipped this question) and in red, under the question before the options. However, the correct answer should be in green. I know this is much to ask but one can find a clearer picture of all the screenshot below:

FreeCodeCamp2

  1. There should be a ‘Retake Quiz’ button that shows ONLY at the TOP of the ‘Summary Page’.

@QuincyLarson please, this means a lot to me. Kindly spread this around for me. Thanks for helping.

2

good luck in finding answers lol
You are not asking a small favor
but guess what I would be happy to help.
but i code in angular nodejs.
and some firebase.
im not proficient in jquery so i cant read very well ur code pen.
what exactly do u need help with if you wrote the code allready?
cheers

3

Thanks. I didn’t write the code. The person who did is not available to help me out. Of course, it’s not a small favour. However, I’m very optimistic someone who can, will be willing to help. Kindly help me spread it. Thanks alot.

5

I will Fork your codepen and see what I can do. I will check back here in a bit. ^^

1 Like
6

Wow, thanks a lot. Great suggestion about screenshot. Here are the screenshots:

FreeCodeCamp2

7

@morgansegura Thanks a lot in advance.

9

I’ve been able to remove the ‘Check Answer’ button and replace it with ‘Next Question’. I actually thought I would break the code. Thank you for the encouragement. Now, I would want 2 things here:

  1. The last question should show ‘End Quiz’ instead of ‘Next Question’
  2. A user should be able to move to skip to the next question whether they answer the question or not.
    @camperextraordinaire what do I do next?
10

lol is funny dawson.
at least u got everyones attention
for me its pretty simple task
to make your page. only problem i see is how to scale it
I guess you want to reuse it?
and ur helping person wrote the code made every question an object in an array.
this is just an example html

<div (click)="answer(apple)">apple</div>
<div class="green" *ngIf="stick==true">correct</div>
<div class="red" *ngIf="fake==true">wrong</div>

and component in angular

pear=false
stick:boolean=false
fake:boolean=false
apple=true;

answer(data){
  if(data=true){
     this.stick=true
  }else{ return this.fake=true}
}
11

Thanks @donjon Please, what will this accomplish and where do I put it?

13

lol yeah im sorry i cant do jquery.
dawson. but i just wanted to show code if u click the correct answer u get a green div with
‘correct’ or wrong answer red ‘wrong’
I just trying to help but as i mentioned my problem is how to scale it so u just can feed it with
an array of objects=questions and everything makes a puzzle right in html and javascript
feel free to come up with suggestions its not my forum =)

15

Please, do not step aside. I found out @donjon isn’t giving me what I want only after my reply to his ‘help’. I decided not to say any more to that. More like me being polite towards him. @camperextraordinaire please, let’s go on with this. I know whose advice I’m taking. Thanks a lot, so far.

16

I appreciate your wanting to help. But like you said, there is an aspect you just can’t connect. I’d appreciate help (minus confusion). Thanks again @donjon

18

Ok. Thank you for your time. @camperextraordinaire

19

ye i understand… my approach is just different but works too
your earlier help with jquery is not that much code to rewrite.
but i understand and leave u 2 to it =)

1 Like
21

Surely there are educational quiz tools out there that already does what you want. By the looks of it, a lot are free, free for educators, or free with some limits.

2 Likes
22

I took another look at the code and was able to remove the ‘Check Answer’ button. Just that so far.

23

Hello,

Not familar much with angular but it should be similar to JS.

What you will need to do is create another button type using <button id=“top” on click(method_here())> and locate that button above what looks like a h3 element, the part that says Question 4.

Then you will have to create a method in the angular. You can create an else-if method using a boolean condition that can check:

if all radio buttons are checked && reset button is clicked, reset radio button selected

OR

if (i>0) meaning, atleast one button is checked && reset button is clicked, reset radio button selections.

Use scope method in angular and refer to the variable of the named radio buttons to reset, like so:
$scope.resetMe = “one”