Built site for gh-pages

.nojekyll

@@ -1 +1 @@
-5068598a
+566a0327

README.md

@@ -1,6 +1,6 @@
 # Quiz Extension For Quarto
 
-Simple RevealJS that allows you to create multiple choice quiz questions in Quarto.
+Simple RevealJS extension that allows you to create multiple choice quiz questions in Quarto.
 
 Here's an example of what this extension looks like: 
 

example.html

@@ -447,20 +447,54 @@ <h2>What is the capital of Germany?</h2>
 <section id="python-lists" class="slide level2 quiz-question">
 <h2>Python lists</h2>
 <p>What is the value of x[2]?</p>
-<div id="607651f0" class="cell" data-execution_count="1">
+<div id="c9934c62" class="cell" data-execution_count="1">
 <div class="sourceCode cell-code" id="cb1"><pre class="sourceCode numberSource python number-lines code-with-copy"><code class="sourceCode python"><span id="cb1-1"><a href=""></a>x <span class="op">=</span> [<span class="dv">2</span>, <span class="dv">3</span>, <span class="dv">4</span>]</span>
 <span id="cb1-2"><a href=""></a>x[<span class="dv">2</span>] <span class="op">=</span> <span class="dv">4</span></span>
 <span id="cb1-3"><a href=""></a><span class="bu">print</span>(x[<span class="dv">2</span>])</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
 </div>
 <ul>
-<li>1</li>
 <li>2</li>
 <li>3</li>
 <li><span class="correct">4</span></li>
 </ul>
 <div class="footer">
 <p>You can also include code or other content prior to the question.</p>
 </div>
+</section>
+<section id="section" class="slide level2 quiz-question">
+<h2></h2>
+<p><strong>What is the name of Ross and Carol’s son in the TV show <em>“Friends”?</em></strong></p>
+<ul>
+<li><span data-explanation="Jack is the name of Monica and Ross's father.">Jack</span></li>
+<li><span data-explanation="Joey is one of the main characters, played by Matt LeBlanc.">Joey</span></li>
+<li><span class="correct">Ben</span></li>
+<li><span data-explanation="Chandler is another main character, played by Matthew Perry.">Chandler</span></li>
+</ul>
+<div class="footer">
+<p>You can specify an explanation for each option using the <code>data-explanation</code> attribute.</p>
+</div>
+</section>
+<section id="what-is-the-formula-for-the-area-of-a-circle" class="slide level2 quiz-question">
+<h2>What is the formula for the area of a circle?</h2>
+<ul>
+<li><span class="correct"><span class="math inline">\(πr^2\)</span></span></li>
+<li><span data-explanation="This is the formula for the circumference of a circle."><span class="math inline">\(2πr\)</span></span></li>
+<li><span data-explanation="This is the formula for the surface area of a sphere."><span class="math inline">\(4πr^2\)</span></span></li>
+<li><span data-explanation="This is the formula for the volume of a sphere."><span class="math inline">\(\frac{4}{3}r^3\)</span></span></li>
+</ul>
+<div class="footer">
+<p>You can also include math expressions <a href="https://quarto.org/docs/visual-editor/technical.html#latex-and-html">using LaTeX</a> in the options.</p>
+</div>
+</section>
+<section id="which-one-is-chandler" class="slide level2 quiz-question">
+<h2>Which one is Chandler?</h2>
+<ul>
+<li><span data-explanation="This is Joey."><img data-src="https://upload.wikimedia.org/wikipedia/en/d/da/Matt_LeBlanc_as_Joey_Tribbiani.jpg" height="90"></span></li>
+<li><span class="correct" data-explanation="Nicely done! This is Chandler."><img data-src="https://upload.wikimedia.org/wikipedia/en/6/66/Matthew_Perry_as_Chandler_Bing.png" width="90"></span></li>
+</ul>
+<div class="footer">
+<p>Or you can try to embed images in the options.</p>
+</div>
 <div class="quarto-auto-generated-content">
 <div class="footer footer-default">
 

example_files/libs/revealjs/plugin/reveal-quiz/quiz.js

@@ -165,13 +165,14 @@ window.RevealQuiz = function () {
               // console.log(selectedOption);
               //check if selected option has span and if it has class of correct
               let isCorrect = selectedOption.querySelector('span') && selectedOption.querySelector('span').classList.contains('correct');
+              let explanation = selectedOption.querySelector('span').getAttribute('data-explanation'); // Get the explanation attribute
               if (isCorrect) {
                 selectedOption.classList.add('correct');
-                cloneFeedbackElement.textContent = 'Correct!';
+                cloneFeedbackElement.textContent = explanation || 'Correct!'; // Use explanation if available
                 cloneFeedbackElement.style.color = '#27ae60';
               } else {
                 selectedOption.classList.add('incorrect');
-                cloneFeedbackElement.textContent = 'Incorrect!';
+                cloneFeedbackElement.textContent = explanation || 'Incorrect!'; // Use explanation if available
                 cloneFeedbackElement.style.color = '#c0392b';
               }
 

index.html

@@ -447,20 +447,54 @@ <h2>What is the capital of Germany?</h2>
 <section id="python-lists" class="slide level2 quiz-question">
 <h2>Python lists</h2>
 <p>What is the value of x[2]?</p>
-<div id="607651f0" class="cell" data-execution_count="1">
+<div id="c9934c62" class="cell" data-execution_count="1">
 <div class="sourceCode cell-code" id="cb1"><pre class="sourceCode numberSource python number-lines code-with-copy"><code class="sourceCode python"><span id="cb1-1"><a href=""></a>x <span class="op">=</span> [<span class="dv">2</span>, <span class="dv">3</span>, <span class="dv">4</span>]</span>
 <span id="cb1-2"><a href=""></a>x[<span class="dv">2</span>] <span class="op">=</span> <span class="dv">4</span></span>
 <span id="cb1-3"><a href=""></a><span class="bu">print</span>(x[<span class="dv">2</span>])</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
 </div>
 <ul>
-<li>1</li>
 <li>2</li>
 <li>3</li>
 <li><span class="correct">4</span></li>
 </ul>
 <div class="footer">
 <p>You can also include code or other content prior to the question.</p>
 </div>
+</section>
+<section id="section" class="slide level2 quiz-question">
+<h2></h2>
+<p><strong>What is the name of Ross and Carol’s son in the TV show <em>“Friends”?</em></strong></p>
+<ul>
+<li><span data-explanation="Jack is the name of Monica and Ross's father.">Jack</span></li>
+<li><span data-explanation="Joey is one of the main characters, played by Matt LeBlanc.">Joey</span></li>
+<li><span class="correct">Ben</span></li>
+<li><span data-explanation="Chandler is another main character, played by Matthew Perry.">Chandler</span></li>
+</ul>
+<div class="footer">
+<p>You can specify an explanation for each option using the <code>data-explanation</code> attribute.</p>
+</div>
+</section>
+<section id="what-is-the-formula-for-the-area-of-a-circle" class="slide level2 quiz-question">
+<h2>What is the formula for the area of a circle?</h2>
+<ul>
+<li><span class="correct"><span class="math inline">\(πr^2\)</span></span></li>
+<li><span data-explanation="This is the formula for the circumference of a circle."><span class="math inline">\(2πr\)</span></span></li>
+<li><span data-explanation="This is the formula for the surface area of a sphere."><span class="math inline">\(4πr^2\)</span></span></li>
+<li><span data-explanation="This is the formula for the volume of a sphere."><span class="math inline">\(\frac{4}{3}r^3\)</span></span></li>
+</ul>
+<div class="footer">
+<p>You can also include math expressions <a href="https://quarto.org/docs/visual-editor/technical.html#latex-and-html">using LaTeX</a> in the options.</p>
+</div>
+</section>
+<section id="which-one-is-chandler" class="slide level2 quiz-question">
+<h2>Which one is Chandler?</h2>
+<ul>
+<li><span data-explanation="This is Joey."><img data-src="https://upload.wikimedia.org/wikipedia/en/d/da/Matt_LeBlanc_as_Joey_Tribbiani.jpg" height="90"></span></li>
+<li><span class="correct" data-explanation="Nicely done! This is Chandler."><img data-src="https://upload.wikimedia.org/wikipedia/en/6/66/Matthew_Perry_as_Chandler_Bing.png" width="90"></span></li>
+</ul>
+<div class="footer">
+<p>Or you can try to embed images in the options.</p>
+</div>
 <div class="quarto-auto-generated-content">
 <div class="footer footer-default">