munchboka-edutools 0.1.13__py3-none-any.whl

munchboka_edutools/static/js/pairPuzzle/dropZone.js

@@ -0,0 +1,119 @@
+class DropZone {
+  constructor(id, uniqueId, gameInstance) {
+    this.id = id;
+    this.uniqueId = uniqueId;
+    this.items = [];
+    this.element = null;
+    this.placeholder = null;
+    this.game = gameInstance;
+  }
+
+  createElement() {
+    const div = document.createElement('div');
+    div.classList.add('drop-zone');
+    div.dataset.id = this.id;
+    this.element = div;
+
+    // Create and add the placeholder element
+    this.placeholder = this.createPlaceholder();
+    div.appendChild(this.placeholder);
+
+    this.addDropEvents();
+    return div;
+  }
+
+  createPlaceholder() {
+    const placeholder = document.createElement('div');
+    placeholder.classList.add('placeholder');
+    placeholder.textContent = 'Dra og dropp her'; // Customize your placeholder text here
+    return placeholder;
+  }
+
+  addDropEvents() {
+    this.element.addEventListener('dragover', (e) => {
+      e.preventDefault(); // Necessary to allow dropping
+      this.element.classList.add('dropped');
+    });
+
+    this.element.addEventListener('dragleave', () => {
+      this.element.classList.remove('dropped');
+    });
+
+    this.element.addEventListener('drop', (e) => {
+      e.preventDefault();
+      const itemId = e.dataTransfer.getData('text/plain');
+      const droppedItem = this.game.getItemById(itemId);
+      if (droppedItem) {
+        // If the item was previously in another drop zone or draggable container, remove it from there
+        const previousZone = this.game.getDropZoneContainingItem(droppedItem);
+        if (previousZone) {
+          previousZone.removeItem(droppedItem);
+        } else {
+          const draggableContainer = this.game.getDraggableContainer();
+          draggableContainer.removeChild(droppedItem.element);
+        }
+
+        this.items.push(droppedItem);
+        droppedItem.element.style.opacity = '1'; // Ensure the item becomes visible after being dropped
+        this.element.insertBefore(droppedItem.element, this.placeholder); // Always append the item before the placeholder
+
+        // Re-render LaTeX in the drop zone
+        renderMathInElement(droppedItem.element, {
+          delimiters: [
+            { left: "$$", right: "$$", display: true },
+            { left: "$", right: "$", display: false },
+            { left: "\\[", right: "\\]", display: true },
+            { left: "\\(", right: "\\)", display: false }
+          ]
+        });
+
+        this.element.classList.remove('dropped');
+      }
+
+      // Update placeholder visibility
+      this.updatePlaceholderVisibility();
+    });
+  }
+
+  updatePlaceholderVisibility() {
+    // Show the placeholder if there are less than two items
+    if (this.items.length < 2) {
+      this.placeholder.style.display = 'block';
+      this.element.appendChild(this.placeholder); // Ensure placeholder is always at the bottom
+    } else {
+      this.placeholder.style.display = 'none';
+    }
+  }
+
+  removeItem(item) {
+    // Remove the item from the items array
+    this.items = this.items.filter(i => i.id !== item.id);
+    this.updatePlaceholderVisibility();
+  }
+
+  clear() {
+    this.items = [];
+    this.element.innerHTML = ''; // Clear all children elements
+    this.element.appendChild(this.placeholder); // Re-add the placeholder
+    this.updatePlaceholderVisibility();
+    this.resetColor();
+  }
+
+  isCorrect() {
+    if (this.items.length !== 2) return false;
+    return this.items[0].pairId === this.items[1].pairId;
+  }
+
+  // Add color feedback to the drop zone
+  setCorrect() {
+    this.element.style.backgroundColor = 'rgba(0, 128, 0, 0.5)';
+  }
+
+  setIncorrect() {
+    this.element.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
+  }
+
+  resetColor() {
+    this.element.style.backgroundColor = '';
+  }
+}

munchboka_edutools/static/js/pairPuzzle/game.js

@@ -0,0 +1,160 @@
+function generateUUID() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = Math.random() * 16 | 0,
+      v = c === 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
+  
+  
+class Game {
+  constructor(containerId, pairs) {
+    this.containerId = containerId;
+    this.uniqueId = generateUUID();
+    this.container = document.getElementById(containerId);
+    this.pairs = pairs;
+    this.items = [];
+    this.dropZones = [];
+    this.init();
+  }
+
+  init() {
+      this.generateHTML();
+      this.createItems();
+      this.createDropZones();
+      this.toast = this.createToast();
+
+      document.getElementById(`check-answer-${this.uniqueId}`).addEventListener('click', () => this.checkAnswer());
+      document.getElementById(`reset-puzzle-${this.uniqueId}`).addEventListener('click', () => this.resetPuzzle());
+
+      document.addEventListener('mousemove', (event) => {
+          this.cursorX = event.clientX;
+          this.cursorY = event.clientY;
+
+      });
+  }
+
+  generateHTML() {
+    if (!this.container) {
+      throw new Error('Container not found');
+    }
+
+    const uniqueId = this.uniqueId;
+
+    this.container.innerHTML = `
+    <div id="draggable-container-${uniqueId}" class="draggable-container"></div>
+    <div id="dropzone-container-${uniqueId}" class="drop-zone-container"></div>
+    <div class="button-container">
+        <button id="check-answer-${uniqueId}" class="button button-run">Sjekk svaret!</button>
+        <button id="reset-puzzle-${uniqueId}" class="button button-reset">Reset puslespill</button>
+    </div>
+      <!-- Toast Notification -->
+    <div id="toast-${uniqueId}" class="toast" style="display: none;">
+        <p>Riktig! Bra jobba 🔥</p>
+    </div>
+    `;
+  }
+
+
+  createItems() {
+    const itemsContainer = document.getElementById(`draggable-container-${this.uniqueId}`);
+    this.pairs.forEach((group, groupIndex) => {
+      group.forEach((item, itemIndex) => {
+        const draggableItem = new DraggableItem(`item-${groupIndex}-${itemIndex}`, item, groupIndex);
+        this.items.push(draggableItem);
+      });
+    });
+  
+    // Shuffle items before adding them to the container
+    this.items.sort(() => 0.5 - Math.random());
+    this.items.forEach((item) => itemsContainer.appendChild(item.createElement()));
+  }
+
+  createDropZones() {
+    const dropzonesContainer = document.getElementById(`dropzone-container-${this.uniqueId}`);
+    this.pairs.forEach((_, index) => {
+      const dropZone = new DropZone(index, this.uniqueId, this);
+      this.dropZones.push(dropZone);
+      dropzonesContainer.appendChild(dropZone.createElement());
+    });
+  }
+
+  getItemById(id) {
+    return this.items.find((item) => item.id === id);
+  }
+
+  getDropZoneContainingItem(item) {
+    return this.dropZones.find(zone => zone.items.includes(item));
+  }
+
+  getDraggableContainer() {
+    return document.getElementById(`draggable-container-${this.uniqueId}`);
+  }
+
+
+  async checkAnswer() {
+    const results = await Promise.all(this.dropZones.map((zone) => zone.isCorrect()));
+    results.forEach((isCorrect, index) => {
+        const dropZone = this.dropZones[index];
+        if (isCorrect) {
+            dropZone.setCorrect(); // Set drop zone to green
+        } else {
+            dropZone.setIncorrect(); // Set drop zone to red
+        }
+    });
+
+    const allCorrect = results.every(result => result);
+    if (allCorrect) {
+        this.showToast();
+    }
+}
+
+  resetPuzzle() {
+    // Reset puzzle by returning all items back to the draggable container
+    const draggableContainer = this.getDraggableContainer();
+    this.items.forEach(item => {
+      draggableContainer.appendChild(item.element);
+      item.element.style.opacity = '1';
+    });
+
+    // Clear the drop zones
+    this.dropZones.forEach(zone => zone.clear());
+  }
+
+  createToast() {
+      const toast = document.createElement('div');
+      toast.id = `toast-${this.uniqueId}`;
+      toast.className = 'toast';
+      toast.style.display = 'none';
+      toast.innerHTML = `
+          <p>Riktig! 🔥</p>
+      `;
+
+      document.body.appendChild(toast);
+      return toast;
+  }
+
+  showToast() {
+      console.log("toast: ", this.toast);
+
+      console.log("X = ", this.cursorX);
+      console.log("Y = ", this.cursorY);
+
+      this.toast.style.top = `${this.cursorY - 150}px`;
+      this.toast.style.left = `${this.cursorX}px`;
+
+      this.toast.style.display = 'block';
+
+      
+
+      setTimeout(() => {
+          this.toast.style.display = 'none';
+      }, 2500); // Display for 2.5 seconds (2000 ms)
+
+  }
+}
+
+
+function initGame(containerId, pairs) {
+  return new Game(containerId, pairs);
+}