npm - cognikit - Versions diffs - 1.0.2 → 1.1.0 - Mend

cognikit 1.0.2 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (124) hide show

package/public/scalable-bare.html DELETED Viewed

@@ -1,432 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="default">
-    <meta name="theme-color" content="#f7f9fc">
-    <title>Temporal Sequencing (Bare) - CogniKit</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        html, body {
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-        }
-        :root {
-            --edu-bg:            247 249 252;
-            --edu-card:          255 255 255;
-            --edu-ink:           31 41 55;
-            --edu-second-ink:    71 85 105;
-            --edu-third-ink:     100 116 139;
-            --edu-inverted-ink:  248 250 252;
-            --edu-success:       22 163 74;
-            --edu-error:         220 38 38;
-            --edu-warning:       255 222 33;
-            --edu-neutral:       14 165 233;
-            --edu-first-accent:  49 120 198;
-            --edu-second-accent: 245 158 11;
-            --edu-third-accent:  236 72 153;
-            --edu-border:        229 231 235;
-            --edu-muted:         243 244 246;
-            --edu-radius:        0.375rem;
-            --edu-shadow-color:  0 0 0;
-            --edu-pad:           1rem;
-            --edu-mar:           0;
-        }
-        body {
-            background: rgb(var(--edu-bg));
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-            height: 100dvh;
-        }
-        /* Header */
-        .header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 1rem 1.5rem;
-            background: rgb(var(--edu-card));
-            border-bottom: 2px solid rgb(var(--edu-border));
-            box-shadow: 0 2px 8px rgba(var(--edu-shadow-color), 0.05);
-            flex-shrink: 0;
-            gap: 1rem;
-        }
-        .header h1 {
-            font-size: 1.25rem;
-            color: rgb(var(--edu-ink));
-            font-weight: 700;
-        }
-        .header-controls {
-            display: flex;
-            gap: 0.75rem;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-        .control-group {
-            display: flex;
-            gap: 0.5rem;
-            align-items: center;
-        }
-        .control-group label {
-            font-size: 0.9rem;
-            font-weight: 600;
-            color: rgb(var(--edu-second-ink));
-        }
-        .control-group select {
-            padding: 0.5rem 1rem;
-            border-radius: 8px;
-            border: 2px solid rgb(var(--edu-border));
-            background: rgb(var(--edu-bg));
-            color: rgb(var(--edu-ink));
-            font-size: 0.9rem;
-            cursor: pointer;
-            transition: all 0.2s;
-            min-height: 40px;
-        }
-        .control-group select:hover {
-            border-color: rgb(var(--edu-first-accent));
-        }
-        .btn {
-            padding: 0.5rem 1rem;
-            border-radius: 8px;
-            border: 2px solid rgb(var(--edu-border));
-            background: rgb(var(--edu-card));
-            color: rgb(var(--edu-ink));
-            font-weight: 600;
-            font-size: 0.9rem;
-            cursor: pointer;
-            transition: all 0.2s;
-            min-height: 40px;
-        }
-        .btn:hover {
-            border-color: rgb(var(--edu-first-accent));
-            background: rgba(var(--edu-first-accent), 0.1);
-        }
-        .btn:active {
-            transform: scale(0.98);
-        }
-        .btn-primary {
-            background: rgb(var(--edu-first-accent));
-            border-color: rgb(var(--edu-first-accent));
-            color: rgb(var(--edu-inverted-ink));
-        }
-        .btn-primary:hover {
-            opacity: 0.9;
-        }
-        /* Main viewport */
-        .main-viewport {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 1.5rem;
-            overflow: hidden;
-        }
-        .interaction-container {
-            width: 100%;
-            height: 100%;
-            max-width: 1200px;
-            display: flex;
-            flex-direction: column;
-        }
-        #interaction {
-            flex: 1;
-            width: 100%;
-            min-height: 0;
-            display: flex;
-        }
-        temporal-sequencing,
-        temporal-sequencing-scalable,
-        rank-order-scalable,
-        rank-order {
-            width: 100%;
-            height: 100%;
-            display: block;
-        }
-        /* Status bar */
-        .status-bar {
-            padding: 0.75rem;
-            background: rgba(var(--edu-first-accent), 0.1);
-            border-radius: 8px;
-            margin-bottom: 1rem;
-            flex-shrink: 0;
-        }
-        .status-bar p {
-            color: rgb(var(--edu-ink));
-            font-size: 0.9rem;
-            margin: 0.25rem 0;
-        }
-        .status-bar strong {
-            color: rgb(var(--edu-first-accent));
-        }
-        /* Mobile styles */
-        @media (max-width: 768px) {
-            .header {
-                padding: 0.75rem 1rem;
-            }
-            .header h1 {
-                font-size: 1rem;
-                flex: 1;
-            }
-            .main-viewport {
-                padding: 1rem;
-            }
-        }
-        @media (max-width: 480px) {
-            .main-viewport {
-                padding: 0.5rem;
-            }
-            .header {
-                padding: 0.5rem;
-            }
-            .control-group label {
-                display: none;
-            }
-        }
-    </style>
-</head>
-<body>
-    <!-- Header -->
-    <div class="header">
-        <h1>Interactions (Bare)</h1>
-        <div class="header-controls">
-            <div class="control-group">
-                <label for="interaction-select">Interaction:</label>
-                <select id="interaction-select">
-                    <option value="rank-order-scalable" selected>Rank Order (Scalable)</option>
-                    <option value="simultaneous-association">Simultaneous Association</option>
-                    <option value="sequential-classification">Sequential Classification</option>
-                    <option value="open-classification">Open Classification</option>
-                    <option value="mcq">MCQ</option>
-                </select>
-            </div>
-            <div class="control-group">
-                <label for="variant-select">Variant:</label>
-                <select id="variant-select">
-                    <option value="elegant">Elegant</option>
-                    <option value="playful">Playful</option>
-                    <option value="outline">Outline</option>
-                    <option value="letter">Letter</option>
-                    <option value="sign" selected>Sign</option>
-                    <option value="minimal">Minimal</option>
-                    <option value="glass">Glass</option>
-                    <option value="card">Card</option>
-                    <option value="empty">Empty</option>
-                </select>
-            </div>
-            <button class="btn" id="hint-btn">Hint</button>
-            <button class="btn" id="reset-btn">Reset</button>
-            <button class="btn btn-primary" id="submit-btn">Submit</button>
-        </div>
-    </div>
-    <!-- Main Viewport -->
-    <div class="main-viewport">
-        <div class="interaction-container">
-                       <div id="interaction"></div>
-        </div>
-    </div>
-    <script type="module">
-        import {
-            RankOrder,
-            SequentialClassification,
-            OpenClassification,
-            MCQ,
-            SimultaneousAssociation,
-            parseYamlAssets,
-            validateAndNormalizeAssets
-        } from './app.js';
-        // ==================== DATA ====================
-        const temporalData = {
-            type: 'seriation',
-            items: ['Egg', 'Caterpillar', 'Chrysalis', 'Butterfly', 'Reproduction', 'Death']
-        };
-        const associationData = {
-            type: 'association',
-            pairs: [
-                { left: 'Sun', right: 'Day' },
-                { left: 'Moon', right: 'Night' },
-                { left: 'Snow', right: 'Winter' },
-                { left: 'Beach', right: 'Summer' },
-                { left: 'School', right: 'Study' },
-                { left: 'Rain', right: 'Umbrella' }
-            ],
-            distractors: ['Oven', 'library']
-        };
-        const classificationData = {
-            type: 'classification',
-            categories: [
-                { label: 'Animals', items: ['Cat', 'Dog', 'Elephant'] },
-                { label: 'Fruits', items: ['Apple', 'Banana', 'Orange'] },
-                { label: 'Vehicles', items: ['Car', 'Bike', 'Plane'] }
-            ],
-            distractors: ['Spoon', 'Cloud']
-        };
-        const mcqData = {
-            type: 'recognition',
-            data: [
-                {
-                    question: 'Which of these is a mammal?',
-                    options: ['Shark', 'Dolphin', 'Trout', 'Octopus'],
-                    correctOptions: ['Dolphin']
-                },
-                {
-                    question: 'Select all prime numbers below 10.',
-                    options: ['2', '3', '4', '5', '6', '7', '8', '9'],
-                    correctOptions: ['2', '3', '5', '7']
-                }
-            ]
-        };
-        const temporalAssetsYaml = `
-butterfly:
-  type: image
-  url: https://images.unsplash.com/photo-1533048324814-79b0a31982f1?q=80&w=768&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
-`;
-        const parsedAssets = parseYamlAssets(temporalAssetsYaml);
-        const normalizedAssets = validateAndNormalizeAssets(parsedAssets);
-        // ==================== CONFIG ====================
-        let currentVariant = 'outline';
-        const config = {
-		variant: currentVariant,
-		shuffle: true,
-		animationsEnabled: true,
-		soundEnabled: true
-        };
-        // ==================== DOM ELEMENTS ====================
-        const interactionElement = document.getElementById('interaction');
-        const interactionSelect = document.getElementById('interaction-select');
-        const variantSelect = document.getElementById('variant-select');
-        const hintBtn = document.getElementById('hint-btn');
-        const resetBtn = document.getElementById('reset-btn');
-        const submitBtn = document.getElementById('submit-btn');
-        // ==================== INITIALIZE INTERACTION ====================
-        let interaction;
-        function mountInteraction(type) {
-            interactionElement.innerHTML = '';
-            if (type === 'rank-order-scalable') {
-                interaction = new RankOrder(temporalData, config, normalizedAssets);
-            } else if (type === 'simultaneous-association') {
-                interaction = new SimultaneousAssociation(associationData, config, normalizedAssets, {
-                    rightColumnLabel: 'Right Items',
-                    leftColumnLabel: 'Left Items',
-                    layoutDirection: 'vertical'
-                });
-            } else if (type === 'sequential-classification') {
-                interaction = new SequentialClassification(classificationData, config, normalizedAssets);
-            } else if (type === 'open-classification') {
-                interaction = new OpenClassification(classificationData, config, normalizedAssets);
-            } else if (type === 'mcq') {
-                interaction = new MCQ(mcqData, config, normalizedAssets);
-            } else {
-                interaction = new RankOrder(temporalData, config, normalizedAssets);
-            }
-            interactionElement.append(interaction);
-            bindInteractionEvents();
-        }
-        // Variant change
-        variantSelect.addEventListener('change', (e) => {
-            currentVariant = e.target.value;
-            config.variant = currentVariant;
-            if (interaction?.onVariantChange) interaction.onVariantChange(currentVariant);
-        });
-        interactionSelect.addEventListener('change', (e) => {
-            mountInteraction(e.target.value);
-        });
-        // Hint button
-        hintBtn.addEventListener('click', () => {
-            interaction.onHint();
-        });
-        // Reset button
-        resetBtn.addEventListener('click', () => {
-            interaction.reset();
-            console.log('Interaction reset');
-        });
-        // Submit button
-        submitBtn.addEventListener('click', () => {
-            if (!interaction.isInteractionComplete()) {
-                alert('Please complete the interaction before submitting');
-                return;
-            }
-            interaction.submit();
-        });
-        // Listen to interaction events
-        function bindInteractionEvents() {
-            interaction.addEventListener('interaction:state-changed', (e) => {
-                console.log('State changed:', e.detail);
-            });
-            interaction.addEventListener('interaction:graded', (e) => {
-                console.log('Interaction graded:', e.detail);
-                const result = e.detail.result;
-                alert(`Score: ${result.score.toFixed(1)}%\nCorrect: ${result.correct}/${result.total}`);
-            });
-            interaction.addEventListener('interaction:hint-shown', (e) => {
-                console.log('Hint shown:', e.detail);
-            });
-        }
-        // Log initial state
-        mountInteraction('temporal-scalable');
-        console.log('Bare demo initialized');
-    </script>
-</body>
-</html>