I made a questionnaire in Javascript

Question

When the test is passed, it gives the user a happy message, but I bet the message will not be displayed until the user gives the correct answer. The condition is fulfilled. I mean the text is displayed but I wanted the message to be inside a <div>. There is a problem here. That the text itself is displayed when the correct answer is provided, but <div> does not accept this condition is available from the beginning of the program .... Why?

Answer 1

Yes I understand that.
With your code as is, #demo div (your message) appears outside of the the .container div
The .container div holds the .grid div which holds the .quiz div.
The .quiz div is the div that holds the questions and the results of the quiz after the last question is answered.
My question to you is where do you want the message to appear inside one the divs mentions above or outside of the all them?
Code below I placed the message inside of the .quiz div, it will appear right underneath the results when the quiz is done.
https://code.sololearn.com/WgF7x5QhB2D9/?ref=app

Answer 2

Rahima Mirzad
First lets get rid of the extra characters causing the css problem.
https://i.imgur.com/iqix9js.png
https://code.sololearn.com/WnSkp7788z0J
Now that we can see the big picture(your code), your question/issue is clearer.
When the quiz is over the results are shown inside of a box/ container, and your message appears underneath.
Where would you like your message to be displayed?

Answer 3

Rahima Mirzad when i copied your code there was a double quote missing but i don't know , now it looks fine . It should work fine now.

Answer 4

Rahima Mirzad i just don't see what is wrong with the code , it works fine for me when i run it on sololearn . Are you running it on sololearn or somewhere else ?

Answer 5

Abhay , Ipang
This is my code
https://code.sololearn.com/WbWko3h3r6vM/?ref=app

Answer 6

Rahima Mirzad what is wrong with this code except the "quiz.score== 4" which should be quiz.score== 5 instead.

Answer 7

ODLNT
Thanks alot 😊😇
Solved

Answer 8

Rahima Mirzad something like this
edited: In line 453 "=" replaced with "+="
https://code.sololearn.com/WO6sOLqP3115/?ref=app

Answer 9

<div id="demo" style=" width: 300px;
height:300px; margin :aotu; background-color : red; padding: 5px 25px 25px 25px; border-radius: 25px ; border: 2px solid red ; box-shadow: 10px" > </div>
In JS code:
if(qiuze.score==4) {
document.getElementById("demo").innerHTML = " Congratulations 👏 ";
/* 4 is the number of correct answers */

Answer 10

Abhay
No, there is no mistake there. I wrote correctly on my computer 🤦‍♀️

Answer 11

Abhay
On my computer. Code is correct but not worked🤦‍♀️
Please help 🙏

Answer 12

I run on pc but don't work

Answer 13

Hi Rahima,
I don't understand this part "but <div> does not accept this condition is available from the beginning of the program..."
What condition not accepted?
Please clarify this part ...

Answer 14

Nobody understood what I wanted to say......😭✋

Answer 15

@ODLNT
I just want the div tag used in the message field to be displayed at the end of the questions. After checking the condition

Answer 16

سلام من تازع وارد این برنامه شدم میشه ی کمکی بهم بکنید؟!