feat(academy): install a quiz for part "rules"

docs/academy/rules-quiz.json

@@ -0,0 +1,21 @@
+{
+  "quizTitle": "Test your knowledge!",
+  "nrOfQuestions": "1",
+  "questions": [
+    {
+      "question": "Which of the following best describes the role of Prolog in the OKP4 protocol?",
+      "questionType": "text",
+      "answerSelectionType": "single",
+      "answers": [
+        "Prolog is primarily used for front-end development within the OKP4 ecosystem, focusing on user interface design and experience.",
+        "Prolog serves as a database management system in OKP4, handling the storage, retrieval, and update of data within the protocol.",
+        "Prolog is employed as an on-chain module within OKP4, interpreting rules related to governance and consent, and ensuring secure and reliable decentralized decision-making.",
+        "Prolog functions as a cryptocurrency wallet in the OKP4 protocol, managing digital assets and facilitating transactions between users."
+      ],
+      "correctAnswer": "3",
+      "messageForCorrectAnswer": "Correct answer. Good job.",
+      "messageForIncorrectAnswer": "Incorrect answer. Please try again.",
+      "point": "1"
+    }
+  ]
+}

docs/academy/rules.md → docs/academy/rules.mdx

@@ -2,6 +2,9 @@
 sidebar_class_name: hidden
 ---
 
+import Quiz from 'react-quiz-component';
+import * as quiz from './rules-quiz.json';
+
 # Define any rule
 
 <i>Reading time: {readingTime} min</i>
@@ -242,3 +245,5 @@ Example queries demonstrate how Prolog can be used to check if a user has access
 Note: The OKP4 SDK contains templates of governance rules that you can use and adapt to your needs.
 
 As we delve deeper into the OKP4 Academy, understanding the intricacies of resource rules becomes paramount. These rules serve as the backbone of the protocol, ensuring that off-chain resources are governed with precision, flexibility, and transparency. Join us as we unravel the complexities of resource rule management within the dynamic landscape of OKP4.
+
+<Quiz quiz={quiz}/>

src/scss/custom.scss

@@ -2,6 +2,7 @@
 @import "main";
 @import "animation";
 @import "card";
+@import "quiz";
 
 @font-face {
   font-family: "Barlow bold";

src/scss/quiz.scss

@@ -0,0 +1,33 @@
+div.react-quiz-container {
+  border: 1px solid var(--ifm-toc-border-color);
+  border-color: var(--ifm-color-primary);
+  padding: 20px;
+  background-color: var(--ifm-navbar-background-color);
+  max-width: 100%;
+
+  .questionWrapper {
+    .answerBtn {
+      font-weight: var(--ifm-font-weight-semibold, 600);
+      font-family: var(--ifm-font-family-base, sans-serif);
+
+      &:hover,
+      &:focus {
+        border-color: var(--ifm-color-primary);
+      }
+    }
+
+    .btn {
+      &.incorrect {
+        background: var(--ifm-color-danger);
+      }
+
+      &.correct {
+        background: var(--ifm-color-success);
+      }
+    }
+  }
+
+  div.filter-dropdown-select {
+    height: auto !important;
+  }
+}