Merge pull request #5 from gmickel:general-improvements

Refactor OpenEHR Quest into a dynamic, markdown-driven quiz application

Author: gmickel

.github/workflows/deploy.yml

@@ -4,7 +4,7 @@ name: Deploy static content to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ['main']
+    branches: [main]
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -17,7 +17,7 @@ permissions:
 
 # Allow one concurrent deployment
 concurrency:
-  group: 'pages'
+  group: pages
   cancel-in-progress: true
 
 jobs:
@@ -44,7 +44,7 @@ jobs:
         uses: actions/upload-pages-artifact@v3
         with:
           # Upload dist folder
-          path: './dist'
+          path: ./dist
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

bun.lockb

@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

components.json

@@ -0,0 +1,142 @@
+---
+title: The Ultimate Coding Challenge
+description: Test your programming skills across various languages and concepts!
+level: 1
+correctAnswer: 2
+difficulty: "Intermediate"
+timeLimit: 20
+---
+
+## Context
+
+### Introduction
+
+Welcome to the Ultimate Coding Challenge! This quest will test your knowledge of **programming concepts, algorithms, and problem-solving skills**. Are you ready to prove your coding prowess?
+
+Test of code highlighting:
+
+inline code: `console.log('Hello, Alice!');`
+
+```python
+def decorator(func):
+    def wrapper(*args, **kwargs):
+        print("Before function call")
+        result = func(*args, **kwargs)
+        print("After function call")
+        return result
+    return wrapper
+```
+
+### Question
+
+You're tasked with implementing a function to find the most frequent element in an array. The function should work efficiently for large arrays. Consider the following requirements:
+
+1. The function should handle arrays of integers.
+2. If there are multiple elements with the same highest frequency, return any one of them.
+3. The function should have a time complexity better than O(n^2).
+
+```go
+func mostFrequent(arr []int) int {
+	maxCount := 0
+	result := arr[0]
+	for i := range arr {
+		count := 0
+		for j := range arr {
+			if arr[i] == arr[j] {
+				count++
+			}
+		}
+		if count > maxCount {
+			maxCount = count
+			result = arr[i]
+		}
+	}
+	return result
+}
+```
+
+How would you implement this function?
+
+### Outro
+
+__Efficient__ array manipulation and understanding of data structures are crucial skills for any programmer. This problem tests your ability to balance time complexity with code readability.
+
+## Answers
+
+- Use nested loops to count occurrences of each element:
+
+```python
+def most_frequent(arr):
+    max_count = 0
+    result = arr[0]
+    for i in range(len(arr)):
+        count = 0
+        for j in range(len(arr)):
+            if arr[i] == arr[j]:
+                count += 1
+        if count > max_count:
+            max_count = count
+            result = arr[i]
+    return result
+```
+
+- Use a hash map to count occurrences in a single pass:
+
+```python
+from collections import defaultdict
+
+def most_frequent(arr):
+    count = defaultdict(int)
+    for num in arr:
+        count[num] += 1
+    return max(count, key=count.get)
+```
+
+- Sort the array and count consecutive elements:
+
+```python
+def most_frequent(arr):
+    arr.sort()
+    max_count = 1
+    res = arr[0]
+    curr_count = 1
+    for i in range(1, len(arr)):
+        if arr[i] == arr[i-1]:
+            curr_count += 1
+        else:
+            if curr_count > max_count:
+                max_count = curr_count
+                res = arr[i-1]
+            curr_count = 1
+    return res
+```
+
+- Use a set to eliminate duplicates, then count occurrences:
+
+```python
+def most_frequent(arr):
+    return max(set(arr), key=arr.count)
+```
+
+## Explanation
+
+The correct answer is option 2: Using a hash map to count occurrences in a single pass.
+
+This solution is optimal because:
+
+1. It has a time complexity of O(n), where n is the length of the array.
+2. It only requires a single pass through the array.
+3. The space complexity is O(k), where k is the number of unique elements in the array.
+
+Here's a breakdown of how the function works:
+
+1. `defaultdict(int)` creates a dictionary where any new key is automatically initialized with a value of 0.
+2. The loop `for num in arr:` iterates through each element in the array.
+3. `count[num] += 1` increments the count for each number.
+4. `max(count, key=count.get)` returns the key (number) with the highest count.
+
+This solution efficiently handles large arrays and meets all the specified requirements.
+
+## Hint
+
+Think about data structures that allow for fast lookups and updates. How can you keep track of counts while only passing through the array once?

example-question.md

@@ -18,18 +18,22 @@
   },
   "dependencies": {
     "@radix-ui/react-alert-dialog": "1.1.1",
+    "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-progress": "1.1.0",
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-tooltip": "1.1.2",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
+    "gray-matter": "^4.0.3",
     "lucide-react": "0.408.0",
+    "marked": "^13.0.2",
     "react": "18.3.1",
     "react-confetti": "6.1.0",
     "react-dom": "18.3.1",
     "shiki": "1.10.3",
     "tailwind-merge": "2.4.0",
-    "tailwindcss-animate": "1.0.7"
+    "tailwindcss-animate": "1.0.7",
+    "yaml": "^2.4.5"
   },
   "devDependencies": {
     "@antfu/eslint-config": "2.23.0",

package.json

@@ -1,10 +1,8 @@
-import OpenEHRQuest from '@/components/openEHRQuest';
+import Quiz from '@/components/Quiz';
 
 function App() {
   return (
-    <div className="App">
-      <OpenEHRQuest />
-    </div>
+    <Quiz />
   );
 }
 

src/App.css

@@ -4,9 +4,10 @@ import { codeToHtml } from 'shiki';
 interface CodeHighlightProps {
   code: string;
   language: string;
+  variant?: 'block' | 'inline';
 }
 
-const CodeHighlight: React.FC<CodeHighlightProps> = ({ code, language }) => {
+const CodeHighlight: React.FC<CodeHighlightProps> = ({ code, language, variant = 'block' }) => {
   const [highlightedCode, setHighlightedCode] = useState<string>('');
   const [isLoading, setIsLoading] = useState(true);
 
@@ -16,29 +17,42 @@ const CodeHighlight: React.FC<CodeHighlightProps> = ({ code, language }) => {
       try {
         const html = await codeToHtml(code, {
           lang: language,
-          theme: 'github-dark', // You can change this to any theme you prefer
+          theme: variant === 'inline' ? 'github-light' : 'night-owl',
         });
         setHighlightedCode(html);
       }
       catch (error) {
         console.error('Error highlighting code:', error);
-        setHighlightedCode(`<pre><code>${code}</code></pre>`);
+        setHighlightedCode(`<code>${code}</code>`);
       }
       finally {
         setIsLoading(false);
       }
     };
 
     highlight();
-  }, [code, language]);
+  }, [code, language, variant]);
 
   if (isLoading) {
-    return <div>Loading...</div>;
+    return <span>Loading...</span>;
+  }
+
+  if (variant === 'inline') {
+    // For inline, we'll strip the pre and code tags and just return the highlighted content
+
+    /*
+    const strippedHtml = highlightedCode
+      .replace(/<pre.*?>/g, '')
+      .replace(/<\/pre>/g, '')
+      .replace(/<code.*?>/g, '')
+      .replace(/<\/code>/g, '');
+    */
+    return <span dangerouslySetInnerHTML={{ __html: highlightedCode }} />;
   }
 
   return (
     <div
-      className="rounded-md overflow-hidden"
+      className="overflow-hidden"
       dangerouslySetInnerHTML={{ __html: highlightedCode }}
     />
   );

src/App.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import RenderContent from '@/components/RenderContent';
+import { cn } from '@/lib/utils';
+
+interface AnswersProps {
+  answers: string[];
+  onAnswer: (index: number) => void;
+  disabled: boolean;
+  selectedAnswer: number | null;
+  correctAnswer: number;
+  answered: boolean;
+}
+
+const Answers: React.FC<AnswersProps> = ({
+  answers,
+  onAnswer,
+  disabled,
+  selectedAnswer,
+  correctAnswer,
+  answered,
+}) => {
+  return (
+    <div className="space-y-4 mt-4">
+      <h2 className="text-lg font-semibold">Answers</h2>
+      {answers.map((answer, index) => {
+        const isSelected = selectedAnswer === index;
+        const isCorrect = correctAnswer - 1 === index;
+
+        let buttonClass = '';
+        if (answered) {
+          if (isCorrect) {
+            buttonClass = 'bg-green-100 hover:bg-green-200 border-green-500';
+          }
+          else if (isSelected) {
+            buttonClass = 'bg-red-100 hover:bg-red-200 border-red-500';
+          }
+        }
+
+        return (
+          <Button
+            key={`answer-${index}`}
+            onClick={() => onAnswer(index)}
+            className={cn(
+              'w-full justify-start text-left h-auto whitespace-pre-wrap',
+              buttonClass,
+            )}
+            variant="outline"
+            disabled={disabled}
+          >
+            <div className="text-sm">
+              <RenderContent content={answer} isInline={true} />
+            </div>
+          </Button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Answers;