feat(devx) - Import Quiz Component from the Wiki (#2643)

* feat(devx): added quiz component

* fix(devx): removed SIPs link

* fix(devx): typos

* fix(devx): fixed button colours and text wrap

Author: lucas-tortora

docs/content/references/contribute/add-a-quiz.mdx

@@ -0,0 +1,54 @@
+---
+description: How to add a Quiz to the IOTA Docs.
+---
+
+import Quiz from '@site/src/components/Quiz';
+import questions from './example-questions.json';
+
+# How To Add A Quiz
+
+You can simply add a Quiz to every page you like in the Wiki!
+
+## Example Quiz
+
+<Quiz questions={questions} />
+
+## Add Your Quiz
+
+Just add the following lines on top of the page.
+
+```javascript
+import Quiz from '@site/src/components/Quiz';
+import questions from './example-questions.json';
+```
+
+Make sure that the Quiz path fits your folder structure. You may need to remove or add some `../`.
+
+Add your questions in a separate `.json` file with the following format:
+
+```json
+[
+  {
+    "questionText": "First Question?",
+    "answerOptions": [
+      { "answerText": "1. Answer", "isCorrect": false },
+      { "answerText": "2. Answer", "isCorrect": false },
+      { "answerText": "3. Answer", "isCorrect": true },
+      { "answerText": "4. Answer", "isCorrect": false }
+    ]
+  },
+  ...
+]
+```
+
+Now you need to include the Quiz components where you want to show it
+
+```
+
+## Your Quiz
+
+<Quiz questions={questions} />
+
+```
+
+That's all. Congratulations, you have created your own Quiz!

docs/content/references/contribute/example-questions.json

@@ -0,0 +1,38 @@
+[
+  {
+    "questionText": "What is the capital of France?",
+    "answerOptions": [
+      { "answerText": "New York", "isCorrect": false },
+      { "answerText": "London", "isCorrect": false },
+      { "answerText": "Paris", "isCorrect": true },
+      { "answerText": "Dublin", "isCorrect": false }
+    ]
+  },
+  {
+    "questionText": "Who is CEO of Tesla?",
+    "answerOptions": [
+      { "answerText": "Jeff Bezos", "isCorrect": false },
+      { "answerText": "Elon Musk", "isCorrect": true },
+      { "answerText": "Bill Gates", "isCorrect": false },
+      { "answerText": "Tony Stark", "isCorrect": false }
+    ]
+  },
+  {
+    "questionText": "The iPhone was created by which company?",
+    "answerOptions": [
+      { "answerText": "Apple", "isCorrect": true },
+      { "answerText": "Intel", "isCorrect": false },
+      { "answerText": "Amazon", "isCorrect": false },
+      { "answerText": "Microsoft", "isCorrect": false }
+    ]
+  },
+  {
+    "questionText": "How many Harry Potter books are there?",
+    "answerOptions": [
+      { "answerText": "1", "isCorrect": false },
+      { "answerText": "4", "isCorrect": false },
+      { "answerText": "6", "isCorrect": false },
+      { "answerText": "7", "isCorrect": true }
+    ]
+  }
+]

docs/content/sidebars/references.js

@@ -355,6 +355,7 @@ const references = [
             'references/contribute/contribution-process',
             'references/contribute/code-of-conduct',
             'references/contribute/style-guide',
+            'references/contribute/add-a-quiz',
             'references/contribute/import-code-docs'
         ],
     },

docs/site/src/components/Quiz/index.tsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+
+export default function Quiz(_questions) {
+  const { questions } = _questions;
+
+  useEffect(() => {
+    setTimeout(() => {
+      reset();
+    }, 1000);
+  }, [questions]);
+
+  const [currentQuestion, setCurrentQuestion] = useState(0);
+  const [showScore, setShowScore] = useState(false);
+  const [score, setScore] = useState(0);
+  const [clicked, setClicked] = useState(-1);
+
+  const handleAnswerOptionClick = (isCorrect, index) => {
+    setClicked(index);
+    if (isCorrect) {
+      setScore(score + 1);
+    }
+
+    setTimeout(() => {
+      const nextQuestion = currentQuestion + 1;
+      if (nextQuestion < questions.length) {
+        setCurrentQuestion(nextQuestion);
+      } else {
+        setShowScore(true);
+      }
+      setClicked(-1);
+    }, 1000);
+  };
+
+  const reset = () => {
+    setShowScore(false);
+    setScore(0);
+    setCurrentQuestion(0);
+  };
+
+  return (
+    <div className='app'>
+      {showScore ? (
+        <div className='score-section'>
+          <p>
+            You scored {score} out of {questions.length}
+          </p>
+          <a
+            className='button button--outline button--primary'
+            onClick={() => reset()}
+          >
+            {'Replay'}
+          </a>
+        </div>
+      ) : (
+        <>
+          <div className='card'>
+            <div className='card__header'>
+              <h3>
+                Question {currentQuestion + 1}/{questions.length}
+              </h3>
+            </div>
+            <div className='card__body'>
+              {questions[currentQuestion]?.questionText}
+            </div>
+            <div className='card__footer'>
+              {questions[currentQuestion]?.answerOptions.map(
+                (answerOption, index) => (
+                  <button
+                    className={`button button--block button--primary margin-bottom--xs   ${
+                      clicked >= 0 && answerOption.isCorrect
+                        ? 'button--success'
+                        : ''
+                    } ${
+                      clicked === index && !answerOption.isCorrect
+                        ? 'button--danger'
+                        : ''
+                    }`}
+                    key={'answer-' + index}
+                    onClick={() =>
+                      handleAnswerOptionClick(answerOption.isCorrect, index)
+                    }
+                  >
+                    {answerOption.answerText}
+                  </button>
+                ),
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

docs/site/src/css/custom.css

@@ -175,6 +175,7 @@
 .pagination-nav__label {
   color: white;
 }
+
 .pagination-nav__link--next {
   background-color: #0101ff;
   display: flex;
@@ -410,8 +411,18 @@ h4 {
 }
 
 /** Globals **/
-.button-cta {
+.button{
+  text-wrap: pretty;
   color: var(--iota-white);
+  background: var(--iota-hero-dark);
+}
+.button--success{
+  background: var(--iota-success-dark);
+}
+.button--danger{
+  background: var(--iota-issue-dark);
+}
+.button-cta {
   letter-spacing: -0.3px;
   cursor: pointer;
   border-style: none;
@@ -428,7 +439,6 @@ h4 {
   border-radius: 2px 0px 0px 0px;
   justify-content: space-between;
   opacity: 0px;
-  background: #0101ff;
   align-items: center;
   justify-content: center;
   gap: 1rem;