Example Questions Technology

.gitignore

@@ -1,4 +1,9 @@
 .idea
 folder
 __pycache__
-results
+results
+
+.vscode
+.devcontainer
+
+website/robotframework-RFCP-syllabus/

website/docs/chapter-02/03_executing.md

@@ -203,4 +203,21 @@ Which levels are written to the log can be controlled by the log level of an exe
 
 
 
+## Quiz
+<Quiz name="Executing RF"
+question="
+# What command is used to start a testsuite?
 
+- [ ] rf /path/to/testsuite
+- [X] robot /path/to/testsuite
+- [ ] robotframework /path/to/testsuite
+
+# Which HTML-files are generated?
+
+- [x] log.html
+- [ ] result.html
+- [ ] executionReport.html
+- [X] report.html
+
+">
+</Quiz>

website/docs/example-exam/Example-exam.mdx

@@ -0,0 +1,35 @@
+# Example exam
+
+<Quiz name="example1"
+question="
+# Is this formatted as sourcecode?
+
+```python
+answer = 42
+if answer == 42:
+    print('hello world')
+```
+
+- [x] Yes
+- [ ] No
+
+# Is the syntaxhighlighting correct?
+
+```robot
+VAR    ${answer} = ${42}
+```
+
+- [x] Yes
+- [ ] No
+
+# What is the capital of France?
+- [ ] Berlin
+- [x] Paris
+- [ ] Rome
+
+# Is the sky blue?
+- [x] Yes
+- [ ] No
+
+">
+</Quiz>

website/docs/example-exam/_category_.json

@@ -0,0 +1,3 @@
+{
+  "label": "Example Exam"
+}

website/package.json

@@ -3,16 +3,19 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
+    "prebuild": "npm run generate:createQuizList",
     "docusaurus": "docusaurus",
     "start": "docusaurus start",
+    "start-public": "docusaurus start --host 0.0.0.0",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "generate:createQuizList": "node src/components/Quiz/quizPrebuild.js"
   },
   "dependencies": {
     "@docusaurus/core": "3.7.0",
@@ -21,8 +24,10 @@
     "clsx": "^2.0.0",
     "docusaurus-lunr-search": "^3.6.0",
     "prism-react-renderer": "^2.3.0",
+    "quizdown-extended": "0.6.5",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.7.0",

website/src/components/Quiz/Quiz.css

@@ -0,0 +1,3 @@
+#resultLink {
+    text-align: center;
+}

website/src/components/Quiz/Quiz.tsx

@@ -0,0 +1,108 @@
+// @ts-ignore
+// eslint-disable @typescript-eslint/eslint/no-var-requires
+
+import React from 'react';
+import { useEffect } from 'react';
+import 'quizdown-extended'
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+import useQuizStore from './QuizStore';
+import hljsDefineRobot from '../../robot';
+import 'quizdown-extended/public/build/extensions/quizdownHighlight';
+import './Quiz.css'
+
+
+export default function Quiz(props) {
+
+  const quiz = useQuizStore((state) => state.quiz);
+  const addQuizResult = useQuizStore((state) => state.addQuizResult);
+  const resultBaseUrl = useBaseUrl('/quizResults');
+
+  const startQuiz = () => {
+    let node = document.querySelector('#quizDownContainer');
+
+    const config = {
+      startOnLoad: true,          // detect and convert all div html elements with class quizdown
+      shuffleAnswers: true,       // shuffle answers for each question
+      shuffleQuestions: true,     // shuffle questions for each quiz
+      nQuestions: undefined,      // display n questions at random, if shuffleQuestions is true
+      primaryColor: 'var(--quizdownPrimaryColor)',  // primary CSS color
+      secondaryColor: 'var(--quizdownSecondaryColor)',  // secondary CSS color
+      textColor: 'var(--quizdownTextColor)',         // text color of some elements
+      buttonColor: 'var(--quizdownSecondaryColor)',  // The background color of the buttons
+      locale: null,               // language of the user interface (auto-detect per default)
+      enableRetry: true           // allow the user to resubmit answers
+    };
+
+
+    quizdownHighlight.registerHljsLanguage("robot", hljsDefineRobot);
+    let quizDown = quizdown.register(quizdownHighlight)
+    quizDown.createApp(props.question, node, config);
+
+    quizDown.listenForStats(node, (event) => {
+      addQuizResult(generateQuizId(props.name), event.numberOfQuestions, event.solved, event.right, event.wrong);
+    });
+
+    return quizDown;
+  };
+
+
+  const setColorsDependingOnTheme = () => {
+    const theme = document.documentElement.getAttribute('data-theme');
+    if (theme === 'light') {
+      document.documentElement.style.setProperty('--quizdownSecondaryColor', "var(--ifm-color-emphasis-200)");
+      document.documentElement.style.setProperty('--quizdownTextColor', "black");
+      quizdownHighlight.setTheme("https://cdn.jsdelivr.net/npm/[email protected]/styles/stackoverflow-light.min.css");
+    } else {
+      document.documentElement.style.setProperty('--quizdownSecondaryColor', "var(--ifm-background-surface-color)");
+      document.documentElement.style.setProperty('--quizdownTextColor', "var(--ifm-color-primary)");
+      quizdownHighlight.setTheme("https://cdn.jsdelivr.net/npm/[email protected]/styles/androidstudio.min.css");
+    }
+  }
+
+  const generateQuizId = (name: string) => {
+
+    let page = window.location.pathname;
+    page = page.replace("/robotframework-RFCP-syllabus/", ""); // Remove beginning of the url
+
+    let id = page.replace("docs/", "") + "#" + name.replace(" ", "+");
+    id = id.toLocaleLowerCase();
+
+    return id;
+  }
+
+  const generateResultLink = () => {
+    if (ExecutionEnvironment.canUseDOM) {
+    return resultBaseUrl + "#" + generateQuizId(props.name);
+    } 
+    return "#";
+  }
+
+  useEffect(() => {
+    // Add quiz to the central storage
+
+    // To set the color scheme of quizdown
+    document.documentElement.style.setProperty('--quizdownPrimaryColor', "var(--ifm-color-primary)");
+
+    const observer = new MutationObserver(() => {
+      setColorsDependingOnTheme();
+    });
+
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+
+    startQuiz();
+    setColorsDependingOnTheme();
+    return () => {
+      observer.disconnect();
+    };
+  }, [props.question]); // Add dependency array with props.question
+
+  return (
+    <span id="quizContainer">
+      <span id="quizDownContainer" className='quizdown'>
+      </span>
+      <a id="resultLink" href={ generateResultLink() } >View results</a>
+    </span>
+  );
+}

website/src/components/Quiz/QuizStore.ts

@@ -0,0 +1,73 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+// Define the interfaces
+interface QuizResult {
+  id: string;
+  quizId: string;
+  timestamp: string;
+  results: {
+    numberOfQuestions: number;
+    solved: number;
+    right: number;
+    wrong: number;
+  }
+}
+
+interface Quiz {
+  quiz: QuizResult[];
+  addQuizResult: (quizId: string, numberOfQuestions: number, solved: number, right: number, wrong: number) => string;
+  getQuizResults: (id: string) => QuizResult[];
+}
+
+
+// Create the store
+const useQuizStore = create<Quiz>()(
+  persist(
+    (set, get) => ({
+      quiz: [],
+
+      // Action to add a new quiz
+      addQuizResult: (quizId: string, numberOfQuestions: number, solved: number, right: number, wrong: number): string => {
+        const state = get();
+
+        const id: string = self.crypto.randomUUID();;
+
+        const timestamp = new Date().toISOString();
+
+        // Otherwise add the new quiz
+        set({
+          quiz: [
+            ...state.quiz,
+            {
+              id,
+              quizId,
+              timestamp,
+              results: {
+                numberOfQuestions,
+                solved,
+                right,
+                wrong,
+              }
+            }
+          ]
+        });
+
+        return id;
+      },
+
+      getQuizResults: (quizId: string): QuizResult[] => {
+        const state = get();
+        return state.quiz.filter((value) => {
+          return value.quizId === quizId;
+        });
+      }
+    }),
+    {
+      name: 'quiz-results', // unique name for localStorage
+    }
+  )
+);
+
+
+export default useQuizStore;

website/src/components/Quiz/quizComponents.ts

@@ -0,0 +1,38 @@
+/*
+* This file is automatically generated and will be overridden when running the build process.
+* Generated on: 6/5/2025, 6:08:35 AM
+*/
+
+export interface QuizPage {
+  id: string;
+  name: string;
+  quizzes: QuizComponent[];
+}
+
+export interface QuizComponent {
+  id: string | null;
+  name: string;
+}
+
+export const quizPages: QuizPage[] = [
+  {
+    "id": "docs-chapter-02-03_executing",
+    "name": "executing",
+    "quizzes": [
+      {
+        "id": "chapter-02/executing#executing+rf",
+        "name": "Executing RF"
+      }
+    ]
+  },
+  {
+    "id": "docs-example-exam",
+    "name": "example-exam",
+    "quizzes": [
+      {
+        "id": "example-exam#example1",
+        "name": "example1"
+      }
+    ]
+  }
+];