Quiz Tool from NotebookLM

Prompt

Generate a quiz delivery tool in html, css, and javascript that is self-contained, embeddable, and complete using the questions I paste here from NotebookLM. I will add a star next to the correct answer for each multiple choice question. Present one question at a time. Show the question. Reveal each possible answer by rotating it into place one at a time. Allow the user to click the their choice of answer. Provide a celebration with confetti and a ta-dah sound. Play a whomp-whomp sound and show a smoke and flames animation for an incorrect answer. Provide a running scoreboard showing the user's score. At the end, provide a total raw score with the number of correct answers out of the possible and a percent score. Include a Next button to advance to the next question and a Previous button so the user can move to an earlier question in case they need to review it. Include a Retake button after the last question to allow the user another try, but randomize the questions and answers in each successive quiz. Use a professional navy blue, white, black, and gray theme. Use the following questions and answers with the correct answer marked with an asterisk: 

1. According to the rubric, what distinguishes an 'Excellent' rating from a 'Proficient' rating in the Ideas category?

*A. The claim is supported by strong evidence and the counterclaim is actively addressed.

B. The essay focuses only on the main claim without mentioning any opposing views.

C. The essay includes a claim but lacks detailed evidence for most reasons.

D. The essay provides a clear claim and mentions a counterclaim 

2. A student receives a total score of 10 points on their argumentative essay. According to the scoring benchmarks, which category does this fall into?

A. Needs Additional Support

*B. Developing Proficiency

C. Strong Argumentative Essay

D. Exceeds 6th Grade Standards 

3. Which of the following is a characteristic of 'Developing' Sentence Fluency?

A. Sentences vary greatly in length and complexity.

B. Sentences are choppy and ideas do not flow logically.

*C. Sentences are mostly simple or repetitive in structure.

D. Ideas flow smoothly because of effective transitions. 

4. In the Organization category, what is required to earn a 4 (Excellent)?

A. Paragraphs exist, but some ideas seem out of place.

*B. Body paragraphs follow a clear, logical structure and ideas are grouped logically.

C. The reader can follow the argument even without clear transitions.

D. The essay has an introduction and conclusion, even if they are weak. 

5. What happens to the readability of an essay at the 'Beginning' level of Conventions?

A. The writing is clear despite several spelling mistakes.

B. Minor errors exist but do not interfere with clarity.

C. The sentences are properly formatted with only one or two mistakes.

*D. Errors significantly interfere with the reader's ability to understand the text. 

6. To achieve 'Proficiency' in Organization, what must be true about the body paragraphs?

A. They must be grouped together perfectly without any transitions.

B. They can be out of place as long as the introduction is strong.

*C. They must support the claim in a logical order.

D. They should only focus on the counterclaim. 

7. How does the '6th Grade Argumentative Essay Rubric' define the 'Ideas' trait for a student at the 'Beginning' level?

*A. The claim is missing or unclear with limited evidence provided.

B. Evidence and reasons are present but lack detail.

C. A clear claim is made but the counterclaim is missing.

D. Most reasons are explained with adequate facts. 

8. Which scoring category is described as having 'ideas generally connect well' with 'some transitions' used to guide the reader?

A. 2 - Developing

B. 1 - Beginning

C. 4 - Excellent

*D. 3 - Proficient 

9. What is the primary objective of the 6th Grade Argumentative Essay Rubric according to the document?

A. To provide a list of vocabulary words for 6th grade students.

B. To grade a student's ability to research historical facts.

C. To help students write creative fictional stories.

*D. To evaluate four essential writing traits for clear, persuasive essays. 

10. If a student needs to improve their 'Conventions' score from a 2 to a 3, what should they focus on?

*A. Ensuring that minor errors no longer interfere with the clarity of the writing.

B. Changing the structure of their sentences to be more complex.

C. Adding a counterclaim to their argument.

D. Eliminating every single spelling and punctuation error in the entire essay.

Iteration

Provide a final score out of the number of total questions and a percent score at the end of the quiz. Add a Retake Quiz button to allow the user multiple attempts, but randomize the question order and randomize the answers. However, ensure that the correct answer always remains the correct answer regardless of its position among the choices. 

Iteration 2

Nice try. I only see the score, not total out of possible and not the percent. Also, the Retake Quiz button is either not present or not easily found. Double check the code and fix both issues.

Reference File