cognikit 0.2.0 → 1.0.1

package/public/index.html

@@ -392,12 +392,8 @@
 
                 <div class="form-group">
                     <label for="theme-select">Theme</label>
-                    <select id="theme-select">
-                        <option value="light" selected>Light</option>
-                        <option value="dark">Dark</option>
-                        <option value="dark-blue">Dark Blue</option>
-                    </select>
-                    <div class="form-help">Theme switching not yet implemented</div>
+                    <select id="theme-select"></select>
+                    <div class="form-help">Uses Cognikit theme presets directly in the preview.</div>
                 </div>
 
                 <div class="form-group">
@@ -475,13 +471,17 @@
             RankOrder,
             ListRecall,
             MCQ,
+            getCognikitThemePresets,
             parseYamlAssets,
+            setCognikitTheme,
             validateAndNormalizeAssets
         } from './app.js';
 
         // State
         let currentVariant = 'elegant';
+        let currentTheme = 'default-light';
         let currentInteraction = null;
+        const themePresets = getCognikitThemePresets();
 
         // DOM Elements
         const viewport = document.getElementById('interaction-viewport');
@@ -501,6 +501,7 @@
 
         // Form Elements
         const variantSelect = document.getElementById('variant-select');
+        const themeSelect = document.getElementById('theme-select');
 	const accentColor = document.getElementById('accent-color');
         const interactionType = document.getElementById('interaction-type');
         const interactionHeading = document.getElementById('interaction-heading');
@@ -516,6 +517,45 @@
         function closeModal(modal) {
             modal.classList.remove('active');
         }
+
+        function rgbTripletToCss(rgbTriplet) {
+            return `rgb(${rgbTriplet.trim().split(/\s+/).join(', ')})`;
+        }
+
+        function rgbTripletToHex(rgbTriplet) {
+            const [r, g, b] = rgbTriplet.trim().split(/\s+/).map(Number);
+            return `#${[r, g, b].map((value) => value.toString(16).padStart(2, '0')).join('')}`;
+        }
+
+        function syncThemeMeta(themeName) {
+            const theme = themePresets[themeName];
+            const metaTheme = document.querySelector('meta[name="theme-color"]');
+            if (theme && metaTheme) {
+                metaTheme.setAttribute('content', rgbTripletToCss(theme["--edu-bg"]));
+            }
+        }
+
+        function applyTheme(themeName) {
+            currentTheme = themeName;
+            setCognikitTheme(themeName);
+            syncThemeMeta(themeName);
+
+            const theme = themePresets[themeName];
+            if (theme) {
+                accentColor.value = rgbTripletToHex(theme["--edu-first-accent"]);
+            }
+        }
+
+        function populateThemes() {
+            themeSelect.innerHTML = Object.keys(themePresets).map((themeName) => {
+                const label = themeName
+                    .split('-')
+                    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+                    .join(' ');
+                const selected = themeName === currentTheme ? 'selected' : '';
+                return `<option value="${themeName}" ${selected}>${label}</option>`;
+            }).join('');
+        }
 	
 	accentColor.addEventListener('change', (e) => {
 		const color = e.target.value;
@@ -547,6 +587,7 @@
         // Settings Apply
         settingsApply.addEventListener('click', () => {
             currentVariant = variantSelect.value;
+            applyTheme(themeSelect.value);
             if (viewport) {
 		currentInteraction.onVariantChange(currentVariant);
                 viewport.setAttribute('variant', currentVariant);
@@ -594,9 +635,12 @@
                         { label: 'Mammals', items: ['Dog', 'Cat', 'Elephant', 'wolf'] },
                         { label: 'Birds', items: ['Eagle', 'Sparrow'] }
                     ],
-                    distractors: ['Rock', 'Cloud']
+                    distractors: ['@:soup', '@:strawberry']
                 },
-                assets: ''
+		assets: `
+strawberry:\n type: image\n url: https://images.unsplash.com/photo-1622921491193-345ffb510f6f?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
+soup:\n type: image\n url: https://plus.unsplash.com/premium_photo-1669831178095-005ed789250a?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
+`,
             },
             RankOrder: {
                 data: {
@@ -619,27 +663,27 @@
                         {
                             question: '@:paris',
                             correctOptions: ['Paris'],
-                            options: ['Paris', 'London', 'Berlin', 'Madrid']
+                            options: ['London', 'Berlin', 'Madrid']
                         },
                         {
                             question: 'Which of these are programming languages?',
                             correctOptions: ['Python', 'JavaScript', 'Java'],
-                            options: ['Python', 'JavaScript', 'Java', 'HTML', 'CSS']
+                            options: ['HTML', 'CSS']
                         },
                         {
                             question: '@:exampleHtml',
                             correctOptions: ['4'],
-                            options: ['3', '4', '5', '6']
+                            options: ['3', '5', '6']
                         },
 			{
-				question: '@:ocean',
-				correctOptions: ['Ocean'],
-				options: ['Volcano', 'Desert', 'Forest', 'Ocean']
+				question: '@:movements',
+				correctOptions: ['Dancing'],
+				options: ['Sleeping', 'Cooking', 'Kissing']
 			},
 			{
 				question: '@:laugh',
 				correctOptions: ["laughing"],
-				options: ['Crying', 'Shouting', 'Laughing']
+				options: ['Crying', 'Shouting']
 			}
                     ]
                 },
@@ -651,7 +695,7 @@ exampleHtml:
  content: <div style="padding:1rem;"><h3>Rich HTML Question</h3><p>What is <strong>2 + 2</strong>?</p><ul><li>Addition</li><li>Basic math</li></ul></div>
  dialog: true
 
-ocean:\n type: video\n url: https://www.pexels.com/download/video/6548176\n dialog: false
+movements:\n type: video\n url: https://www.pexels.com/download/video/6548176\n dialog: false
 
 laugh:\n type: audio\n url: https://www.soundjay.com/human/sounds/man-laughing-01.mp3\n dialog: true
 `
@@ -735,6 +779,12 @@ laugh:\n type: audio\n url: https://www.soundjay.com/human/sounds/man-laughing-0
                 // The shell now reads everything from interaction.config
                 viewport.setInteraction(interaction);
 
+		const handler = () => {
+			alert(0);
+		}
+
+		viewport.toggleCloseBtn(handler);
+
                 currentInteraction = interaction;
                 closeModal(configModal);
 
@@ -747,6 +797,8 @@ laugh:\n type: audio\n url: https://www.soundjay.com/human/sounds/man-laughing-0
 
         // Initialize with default interaction
         window.addEventListener('DOMContentLoaded', () => {
+            populateThemes();
+            applyTheme(currentTheme);
             configApply.click();
         });
     </script>