Engage guests with a fun quiz about the couple using custom JavaScript
The Interactive Quiz is a fun feature that lets guests test their knowledge about the couple. This template includes a complete JavaScript quiz system embedded in the couple story page.
<article id="main"> <header> <h2>The Couple</h2> <h3>Take the Quiz !</h3> <p> We could tell you our story ... or we could see how well you know it. Find some inside secrets and facts you probably have never heard about Ankita and Anil. </p> </header> <section class="wrapper style5"> <div class="inner"> <!-- Quiz container --> <div id='quiz_container'></div> </div> </section></article>
2
Add Quiz Styling
The template includes comprehensive CSS for quiz styling:
{ "question": "What was their favourite thing to do while hanging out as friends?", "options": [ { "value": "Go to latest kannada/hindi movies", "right": false }, { "value": "Shop and eat in banashankari BDA complex", "right": false }, { "value": "Find and eat dosa in best or new resturants/eateries in bangalore", "right": true }, { "value": "Hang out in 4th block Jayanagar", "right": false } ]}
The template uses a custom quiz library. Here’s the initialization pattern:
<script> // Quiz questions data array var data = [ // Your questions here ]; // Initialize quiz var quiz = new Quiz({ quizQuestions: data, elementId: 'quiz_container', showAnswersBtn: true, showResetBtn: true });</script>
{ "type": "radio", // Question type (currently only 'radio' supported) "question": "Question text?", // The question to ask "explanation": "", // Optional explanation (not displayed in this version) "options": [ // Array of answer options { "value": "Answer text", // The answer option text "right": true, // Whether this is the correct answer "selected": false // Initial selection state } ], "selected": "0" // Index of correct answer (as string)}
The "right": true property indicates the correct answer. Only one option per question should have this set to true.
Place the quiz at the top of your couple story page:
<header> <h2>The Couple</h2> <h3>Take the Quiz!</h3> <p>See how well you know us...</p></header><div id='quiz_container'></div><!-- Story content below -->
This engages visitors before they read your full story.
Dedicated Quiz Page
Create a separate page just for the quiz:
<article id="main"> <header> <h2>How Well Do You Know Us?</h2> <p>Test your knowledge and see your score!</p> </header> <section class="wrapper style5"> <div class="inner"> <div id='quiz_container'></div> </div> </section></article>
After the Story
Place it at the end of your couple story:
<!-- Story sections --><section> <h2>Alright ... Here's the Story</h2> <!-- Story content --></section><!-- Quiz at the end --><section> <h2>Now Test Your Knowledge!</h2> <div id='quiz_container'></div></section>
Question Count: Aim for 8-15 questions. Too few feels too quick, too many loses engagement. The template example has 12 questions, which is a good sweet spot.
Mix Easy and Hard: Start with 2-3 easy questions to build confidence, include some medium difficulty in the middle, and end with 1-2 challenging questions for fun.
Answer Length: Keep answer options concise. Long text in multiple choice options becomes hard to scan and compare. Aim for 5-10 words per option.
Here are question categories to inspire your own quiz:
How They Met: First meeting, first date, where they lived
Favorites: Food, movies, music, vacation spots
Firsts: First concert, first trip, first “I love you”
Quirks: Pet peeves, hidden talents, funny habits
Relationship Milestones: How long together, engagement details
Personal Facts: Childhood stories, career paths, hobbies
Future Plans: Honeymoon destination, dream home, family goals
Inside Jokes: Stories only close friends would know
Include at least one “fun fact” question that even close friends might not know - it makes the quiz more interesting and gives guests new insights about you!
