Forum Discussion
My New “Missed Questions Only” Quiz Format for Rise 360.
One quiz. Many chances. Zero wasted time
Ever wished you could skip the boring parts of a quiz and just focus on what you got wrong? Well, now you can.
I’ve created a “Missed Questions Only” quiz — a smarter, faster way to learn. Instead of starting from scratch, you get a second chance only at the questions you missed. No wasted time, no repeating what you already know — just targeted practice that helps you master the tricky stuff and hit that perfect score.
It’s like a quiz with a built-in comeback round — your mistakes become your roadmap to success.
Ready to turn wrong answers into wins? Give it a try and see how well you know your fun facts.
🔗 Rise Link: https://360.articulate.com/review/content/7126ec89-ff0c-4595-bac3-a0fe5e2c6a26/review
🖥️ Code Block: Copy the code below.
📄 Template: See an example of my template for organizing images, questions, answers, and each JS snippet.
<div id="quiz-app">
<div class="quiz-card">
<div class="quiz-header">
<div>
<div class="quiz-label">Fun Facts Quiz</div>
<h2 id="quiz-title">Quiz</h2>
</div>
<div class="quiz-status">
<span id="round-badge">Round 1</span>
<span id="progress-text">Question 1 of 1</span>
</div>
</div>
<div id="scorebar" class="scorebar">
<div>Correct: <strong id="correct-count">0</strong></div>
<div>Incorrect: <strong id="incorrect-count">0</strong></div>
<div>Remaining in Round: <strong id="remaining-count">0</strong></div>
</div>
<div id="question-container">
<img id="question-image" src="" alt="Question Image" style="max-width:100%; border-radius:12px; margin-bottom:16px; display:none;" />
<div id="question-text" class="question-text"></div>
<div id="answers" class="answers"></div>
<div id="feedback" class="feedback"></div>
</div>
<div class="quiz-actions">
<button id="next-btn" disabled>Next</button>
<button id="retry-btn" style="display:none;">Retry Missed Questions</button>
<button id="restart-btn" style="display:none;">Restart Full Quiz</button>
</div>
</div>
</div>
<style>
/* Same styling as before */
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #f4f7fb;
color: #1f2937;
}
#quiz-app {
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
.quiz-card {
background: #ffffff;
border: 1px solid #dbe4f0;
border-radius: 16px;
padding: 24px;
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.quiz-header {
display: flex;
justify-content: space-between;
align-items: start;
gap: 16px;
margin-bottom: 18px;
}
.quiz-label {
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #2563eb;
margin-bottom: 6px;
}
.quiz-header h2 {
margin: 0;
font-size: 28px;
}
.quiz-status {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
font-size: 14px;
}
.quiz-status span {
background: #eef4ff;
color: #1d4ed8;
padding: 8px 12px;
border-radius: 999px;
font-weight: 600;
}
.scorebar {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 22px;
padding: 12px;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 12px;
font-size: 14px;
}
#question-image {
display: block; /* ensure image is shown */
max-width: 920px; /* maximum width */
max-height: 300px; /* maximum height */
width: 100%; /* scale to container width if smaller */
height: auto; /* maintain aspect ratio */
margin: 0 auto 16px auto; /* center horizontally with bottom margin */
object-fit: contain; /* scale image without cropping */
border-radius: 12px; /* consistent border radius */
background-color: #f3f4f6; /* subtle background color for empty space */
}
.question-text {
font-size: 22px;
font-weight: 700;
line-height: 1.35;
margin-bottom: 20px;
}
.answers {
display: grid;
gap: 12px;
}
.answer-btn {
width: 100%;
text-align: left;
border: 2px solid #d1d5db;
background: #fff;
color: #111827;
border-radius: 12px;
padding: 14px 16px;
font-size: 16px;
cursor: pointer;
transition: .2s ease;
}
.answer-btn:hover:not(:disabled) {
border-color: #93c5fd;
background: #f8fbff;
}
.answer-btn:disabled {
cursor: default;
opacity: 1;
}
.answer-btn.correct {
border-color: #16a34a;
background: #ecfdf3;
color: #166534;
font-weight: 700;
}
.answer-btn.incorrect {
border-color: #dc2626;
background: #fef2f2;
color: #991b1b;
font-weight: 700;
}
.feedback {
margin-top: 18px;
min-height: 28px;
font-size: 16px;
font-weight: 600;
}
.feedback.correct {
color: #15803d;
}
.feedback.incorrect {
color: #b91c1c;
}
.quiz-actions {
display: flex;
gap: 12px;
margin-top: 22px;
flex-wrap: wrap;
}
.quiz-actions button {
border: none;
border-radius: 10px;
padding: 12px 18px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
#next-btn {
background: #2563eb;
color: #fff;
}
#next-btn:disabled {
background: #9ca3af;
cursor: not-allowed;
}
#retry-btn {
background: #f59e0b;
color: #fff;
}
#restart-btn {
background: #111827;
color: #fff;
}
.final-message {
padding: 18px;
border-radius: 14px;
background: #effaf3;
border: 1px solid #86efac;
color: #166534;
font-size: 18px;
line-height: 1.5;
}
.small-note {
margin-top: 10px;
font-size: 14px;
color: #4b5563;
}
MeDia (max-width: 640px) {
.quiz-header {
flex-direction: column;
align-items: flex-start;
}
.quiz-status {
align-items: flex-start;
}
.question-text {
font-size: 20px;
}
}
</style>
<script>
// Questions with imageUrl placeholder (replace URLs with your uploaded Rise 360 images)
const fullQuiz = [
{
question: "Which animal can sleep standing up?",
imageUrl: "https://images.articulate.com/f:jpg,a:retain,b:fff,w:1680,q:90/rise/courses/YLUYT4CI3ckYMonl07a4CHihYXT3CnUJ/z45b6W_xMLJUUJld.jpg",
options: ["Horse", "Dog", "Penguin", "Kangaroo"],
answer: "Horse"
},
{
question: "What is the only food that essentially never spoils?",
imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/MddUJBQTsySlOvqv.jpg",
options: ["Rice", "Honey", "Peanut butter", "Chocolate"],
answer: "Honey"
},
{
question: "True or False: Bananas are berries, but strawberries technically aren’t.",
imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/GSei0ep7BuNe7mfL.png",
options: ["True", "False"],
answer: "True"
},
{
question: "What is a group of flamingos called?",
imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/9bCYyNGee1QQRUWC.jpg",
options: ["A flock", "A flamboyance", "A parade", "A bouquet"],
answer: "A flamboyance"
},
{
question: "Which country has more pyramids than any other country in the world?",
imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/srrP1z5U7J1QaYow.jpeg",
options: ["Egypt", "Mexico", "Sudan", "Peru"],
answer: "Sudan"
},
{
question: "Which animal has fingerprints so similar to humans that they can be difficult to tell apart?",
imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/z32I4pCG_PvYZDUD.jpg",
options: ["Chimpanzee", "Koala", "Raccoon", "Sloth"],
answer: "Koala"
},
{
question: "How many hearts does an octopus have?",
imageUrl: "https://articulateusercontent.com/rise/courses/YLUYT4CI3ckYMonl07a4CHihYXT3CnUJ/1EOT8Ml6xu2_Lmvd.png",
options: ["1", "2", "3", "8"],
answer: "3"
},
{
question: "Which fruit floats in water because about 25% of its volume is air?",
imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/kRIyy568MhLPiEFd.jpg",
options: ["Apple", "Orange", "Grape", "Strawberry"],
answer: "Apple"
},
{
question: "What is the national animal of Scotland?",
imageUrl: "https://images.articulate.com/f:jpg,a:retain,b:fff,w:1680,q:90/rise/courses/YLUYT4CI3ckYMonl07a4CHihYXT3CnUJ/Tl89HrMYH0AyvzF2.jpg",
options: ["Highland cow", "Golden eagle", "Unicorn", "Red deer"],
answer: "Unicorn"
},
{
question: "True or False: A day on Venus is longer than a year on Venus.",
imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/WBnprMTKTGmJCPre.jpg",
options: ["True", "False"],
answer: "True"
},
{
question: "What is a group of crows called?",
imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/QhTq5yGSSxZC45ZF.jpg",
options: ["A mystery", "A murder", "A mob", "A shadow"],
answer: "A murder"
},
{
question: "What is a group of owls called?",
imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/d_g79Dx03aWnVP2S.jpg",
options: ["A parliament", "A council", "A jury", "A congress"],
answer: "A parliament"
},
{
question: "What is a group of giraffes called?",
imageUrl: "https://articulateusercontent.com/rise/courses/YLUYT4CI3ckYMonl07a4CHihYXT3CnUJ/-jRiKJcZZX1mWlfh.jpg",
options: ["A tower", "A skyscraper", "A stretch", "A column"],
answer: "A tower"
},
{
question: "What is a group of rhinos called?",
imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/jilS2EvEMWFQCHLN.jpg",
options: ["A crash", "A charge", "A stampede", "A rumble"],
answer: "A crash"
},
{
question: "What is a group of porcupines called?",
imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/WwtKh0xFKUgG07x1.jpg",
options: ["A pricker", "A prickle", "A pincushion", "A spike"],
answer: "A prickle"
},
{
question: "What is a group of zebras called?",
imageUrl: "https://articulateusercontent.com/rise/courses/YLUYT4CI3ckYMonl07a4CHihYXT3CnUJ/G-vljexS-nyS4lg3.jpg",
options: ["A dazzle", "A stripe", "A blur", "A flash"],
answer: "A dazzle"
},
{
question: "What is a group of hippos called?",
imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/M-1LbZ5VHqL28Ez4.jpg",
options: ["A splash", "A bloat", "A barrel", "A wallow"],
answer: "A bloat"
},
{
question: "What is a group of ferrets called?",
imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/ob7XOK2dtuA2btB-.jpg",
options: ["A mischief", "A trouble", "A business", "A chaos"],
answer: "A business"
},
{
question: "What is a group of ravens called?",
imageUrl: "https://articulateusercontent.com/rise/courses/YLUYT4CI3ckYMonl07a4CHihYXT3CnUJ/L6_Yxla0T9t97Qx8.jpg",
options: ["An unkindness", "A darkness", "A conspiracy", "A haunting"],
answer: "An unkindness"
},
{
question: "What is a group of bears called?",
imageUrl: "https://articulateusercontent.com/rise/courses/Kg8aAYIS9RJvSNl0YFM3mOw3o8OQbz5c/5fA5geB-XbftAeB6.jpg",
options: ["A grumble", "A sleuth", "A lumber", "A maul"],
answer: "A sleuth"
}
];
let currentQuiz = [];
let currentIndex = 0;
let selectedAnswer = null;
let totalCorrect = 0;
let totalIncorrect = 0;
let roundNumber = 1;
let missedQuestions = [];
const questionContainer = document.getElementById("question-container");
const questionImage = document.getElementById("question-image");
const questionText = document.getElementById("question-text");
const answersEl = document.getElementById("answers");
const feedbackEl = document.getElementById("feedback");
const nextBtn = document.getElementById("next-btn");
const retryBtn = document.getElementById("retry-btn");
const restartBtn = document.getElementById("restart-btn");
const correctCountEl = document.getElementById("correct-count");
const incorrectCountEl = document.getElementById("incorrect-count");
const remainingCountEl = document.getElementById("remaining-count");
const progressTextEl = document.getElementById("progress-text");
const roundBadgeEl = document.getElementById("round-badge");
function shuffle(array) {
const arr = [...array];
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr;
}
function prepareQuiz(questions) {
return shuffle(questions).map(q => ({
...q,
options: shuffle(q.options)
}));
}
function initQuiz() {
currentQuiz = prepareQuiz(fullQuiz);
currentIndex = 0;
selectedAnswer = null;
totalCorrect = 0;
totalIncorrect = 0;
roundNumber = 1;
missedQuestions = [];
retryBtn.style.display = "none";
restartBtn.style.display = "none";
nextBtn.style.display = "inline-block";
questionContainer.style.display = "block";
renderQuestion();
updateScore();
}
function startRetryRound() {
currentQuiz = prepareQuiz(missedQuestions);
currentIndex = 0;
selectedAnswer = null;
missedQuestions = [];
roundNumber++;
retryBtn.style.display = "none";
restartBtn.style.display = "none";
nextBtn.style.display = "inline-block";
questionContainer.style.display = "block";
renderQuestion();
updateScore();
}
function renderQuestion() {
const q = currentQuiz[currentIndex];
// Show or hide image depending on if imageUrl is set
if (q.imageUrl) {
questionImage.src = q.imageUrl;
questionImage.style.display = "block";
} else {
questionImage.style.display = "none";
}
feedbackEl.textContent = "";
feedbackEl.className = "feedback";
nextBtn.disabled = true;
selectedAnswer = null;
roundBadgeEl.textContent = `Round ${roundNumber}`;
progressTextEl.textContent = `Question ${currentIndex + 1} of ${currentQuiz.length}`;
remainingCountEl.textContent = currentQuiz.length - currentIndex;
questionText.textContent = q.question;
answersEl.innerHTML = "";
q.options.forEach(option => {
const btn = document.createElement("button");
btn.className = "answer-btn";
btn.type = "button";
btn.textContent = option;
btn.addEventListener("click", () => handleAnswer(btn, option, q.answer));
answersEl.appendChild(btn);
});
}
function handleAnswer(button, chosen, correct) {
if (selectedAnswer !== null) return;
selectedAnswer = chosen;
const buttons = document.querySelectorAll(".answer-btn");
buttons.forEach(btn => btn.disabled = true);
if (chosen === correct) {
button.classList.add("correct");
feedbackEl.textContent = "Correct!";
feedbackEl.className = "feedback correct";
totalCorrect++;
} else {
button.classList.add("incorrect");
feedbackEl.textContent = "Incorrect.";
feedbackEl.className = "feedback incorrect";
totalIncorrect++;
missedQuestions.push(currentQuiz[currentIndex]);
}
updateScore();
nextBtn.disabled = false;
}
function updateScore() {
correctCountEl.textContent = totalCorrect;
incorrectCountEl.textContent = totalIncorrect;
remainingCountEl.textContent = currentQuiz.length > 0
? Math.max(currentQuiz.length - currentIndex - (selectedAnswer ? 1 : 0), 0)
: 0;
}
function goNext() {
currentIndex++;
if (currentIndex < currentQuiz.length) {
renderQuestion();
updateScore();
} else {
showRoundResults();
}
}
function showRoundResults() {
questionText.textContent = "";
answersEl.innerHTML = "";
feedbackEl.textContent = "";
questionImage.style.display = "none";
nextBtn.style.display = "none";
if (missedQuestions.length > 0) {
questionText.innerHTML = `
<div class="final-message" style="background:#fff7ed;border-color:#fdba74;color:#9a3412;">
<strong>Round ${roundNumber} complete.</strong><br>
You have <strong>${missedQuestions.length}</strong> question(s) to retry.
<div class="small-note">Click the button below to retake only the questions you missed.</div>
</div>
`;
retryBtn.style.display = "inline-block";
restartBtn.style.display = "inline-block";
remainingCountEl.textContent = missedQuestions.length;
} else {
questionText.innerHTML = `
<div class="final-message">
<strong>Congratulations!</strong><br>
You have answered all questions correctly.
<div class="small-note">
Final score: ${totalCorrect} correct, ${totalIncorrect} incorrect attempts.
</div>
</div>
`;
retryBtn.style.display = "none";
restartBtn.style.display = "inline-block";
remainingCountEl.textContent = 0;
}
}
nextBtn.addEventListener("click", goNext);
retryBtn.addEventListener("click", startRetryRound);
restartBtn.addEventListener("click", initQuiz);
initQuiz();
</script>
3 Replies
I'm glad to hear that people are finding this useful! I wanted to share that in the quiz I created for work, I included a "Continue Block" to ensure learners completed the quiz. To achieve this, I added simple completion parameters to the code block. You can learn more about this in the Rise 360 article titled How to Use Code Block.
Well, first of all JenniferLynch-5, apparently I'm lacking on my fun fact knowledge 🤭
But this is awesome! I can see this working really well for certification or compliance training where people need to really retain the material and drill down into their knowledge gaps.
We will be sharing this in an upcoming Weekly Newsletter!
This is soooo cool JenniferLynch-5, definitely sharing with the team that builds code block. They are going to love seeing this example! Thanks for sharing :)
