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

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

#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.


#4

Instead of expecting others to download and install something to see what you want, just make some screenshots and add them to your original post by editing the original post.


#5

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


#6

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

FreeCodeCamp2


#7

@morgansegura Thanks a lot in advance.


#8

I have read through your list of wanted features. The first one is fairly simple. Just delete the code for the button. Do that first and then we can guide you on the other requests.


#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.
    @RandellDawson 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?


#12

Seems like @donjon is going to teach you Angular instead of using the jQuery. That is great. However, to avoid too many people giving you completely different information on how to implement your wanted features, I will step aside. If you decide you want to approach this using jQuery to avoid rewriting a lot of your code, then let me know.


#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 =)


#14

I have been learning React and not Angular, so feel free to help out with an Angular solution here. I am sure others on the forum would be happy to learn something new, since Angular is not currently taught in the curriculum.


#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. @RandellDawson 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


#17

I will be offline for a bit, but will be back later. If no one has responded, I will see what I can do to help.

In the mean time, take a shot at trying to implement the features yourself and then report back to us if you run into any trouble.


#18

Ok. Thank you for your time. @RandellDawson


#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 =)


#20

So what have you accomplished so far?