Voeg thematische kleurplaten en creatieve niveaus toe (v0.4.65-beta) #3
4 changed files with 17 additions and 7 deletions
2
VERSION
2
VERSION
|
|
@ -1 +1 @@
|
||||||
0.3.30-beta
|
0.3.31-beta
|
||||||
|
|
|
||||||
|
|
@ -44,6 +44,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="fabmenu">
|
<div id="fabmenu">
|
||||||
<button class="fab-item" data-f="widgets"><span class="fi">🧩</span><span class="fl"></span></button>
|
<button class="fab-item" data-f="widgets"><span class="fi">🧩</span><span class="fl"></span></button>
|
||||||
|
<button class="fab-item" data-f="anchor"><span class="fi">⚓</span><span class="fl"></span></button>
|
||||||
<button class="fab-item" data-f="draw"><span class="fi">✏️</span><span class="fl"></span></button>
|
<button class="fab-item" data-f="draw"><span class="fi">✏️</span><span class="fl"></span></button>
|
||||||
<button class="fab-item" data-f="mind"><span class="fi">🕸️</span><span class="fl"></span></button>
|
<button class="fab-item" data-f="mind"><span class="fi">🕸️</span><span class="fl"></span></button>
|
||||||
<button class="fab-item" data-f="img"><span class="fi">🖼️</span><span class="fl"></span></button>
|
<button class="fab-item" data-f="img"><span class="fi">🖼️</span><span class="fl"></span></button>
|
||||||
|
|
|
||||||
|
|
@ -27,11 +27,13 @@ let zTop = 10, widgetCount = 0;
|
||||||
const instances = new Set();
|
const instances = new Set();
|
||||||
|
|
||||||
const REGISTRY = [
|
const REGISTRY = [
|
||||||
|
/* het ankerwidget staat bewust vooraan: het woordweb voor woordenschat-
|
||||||
|
onderwijs is de kern van de taalkant en verdient de prominentste plek */
|
||||||
|
{ id:"anchor", cat:"taal", icon:"⚓", w:680, h:500, minW:440, minH:340, mount:mountAnchor },
|
||||||
{ id:"letters", cat:"taal", icon:"🔤", w:760, h:640, minW:640, minH:540, mount:mountLetterGame },
|
{ id:"letters", cat:"taal", icon:"🔤", w:760, h:640, minW:640, minH:540, mount:mountLetterGame },
|
||||||
{ id:"flits", cat:"taal", icon:"⚡", w:520, h:430, minW:400, minH:330, mount:mountFlits },
|
{ id:"flits", cat:"taal", icon:"⚡", w:520, h:430, minW:400, minH:330, mount:mountFlits },
|
||||||
{ id:"hak", cat:"taal", icon:"✂️", w:540, h:440, minW:420, minH:340, mount:mountHak },
|
{ id:"hak", cat:"taal", icon:"✂️", w:540, h:440, minW:420, minH:340, mount:mountHak },
|
||||||
{ id:"ball", cat:"taal", icon:"🎈", w:620, h:560, minW:480, minH:440, mount:mountBall },
|
{ id:"ball", cat:"taal", icon:"🎈", w:620, h:560, minW:480, minH:440, mount:mountBall },
|
||||||
{ id:"anchor", cat:"taal", icon:"⚓", w:680, h:500, minW:440, minH:340, mount:mountAnchor },
|
|
||||||
{ id:"sentence", cat:"taal", icon:"🧩", w:620, h:520, minW:400, minH:360, mount:mountSentence },
|
{ id:"sentence", cat:"taal", icon:"🧩", w:620, h:520, minW:400, minH:360, mount:mountSentence },
|
||||||
{ id:"madd", cat:"rekenen", icon:"➕", w:460, h:620, minW:380, minH:520, mount:(r,s,o)=>mountMath(r,s,"add",o) },
|
{ id:"madd", cat:"rekenen", icon:"➕", w:460, h:620, minW:380, minH:520, mount:(r,s,o)=>mountMath(r,s,"add",o) },
|
||||||
{ id:"msub", cat:"rekenen", icon:"➖", w:460, h:620, minW:380, minH:520, mount:(r,s,o)=>mountMath(r,s,"sub",o) },
|
{ id:"msub", cat:"rekenen", icon:"➖", w:460, h:620, minW:380, minH:520, mount:(r,s,o)=>mountMath(r,s,"sub",o) },
|
||||||
|
|
@ -843,6 +845,7 @@ const fab = document.getElementById("fab");
|
||||||
const fabMenu = document.getElementById("fabmenu");
|
const fabMenu = document.getElementById("fabmenu");
|
||||||
function refreshFab(){
|
function refreshFab(){
|
||||||
fabMenu.querySelector('[data-f="widgets"] .fl').textContent = T("fabWidgets");
|
fabMenu.querySelector('[data-f="widgets"] .fl').textContent = T("fabWidgets");
|
||||||
|
fabMenu.querySelector('[data-f="anchor"] .fl').textContent = T("fabAnchor");
|
||||||
fabMenu.querySelector('[data-f="draw"] .fl').textContent = T("fabDraw");
|
fabMenu.querySelector('[data-f="draw"] .fl').textContent = T("fabDraw");
|
||||||
fabMenu.querySelector('[data-f="mind"] .fl').textContent = T("fabMind");
|
fabMenu.querySelector('[data-f="mind"] .fl').textContent = T("fabMind");
|
||||||
fabMenu.querySelector('[data-f="img"] .fl').textContent = T("fabImg");
|
fabMenu.querySelector('[data-f="img"] .fl').textContent = T("fabImg");
|
||||||
|
|
@ -865,6 +868,10 @@ fabMenu.querySelector('[data-f="widgets"]').addEventListener("click", ()=>{
|
||||||
fabMenu.classList.remove("open"); fab.classList.remove("open");
|
fabMenu.classList.remove("open"); fab.classList.remove("open");
|
||||||
renderTemplates(); renderGallery(); galleryWrap.classList.add("open");
|
renderTemplates(); renderGallery(); galleryWrap.classList.add("open");
|
||||||
});
|
});
|
||||||
|
fabMenu.querySelector('[data-f="anchor"]').addEventListener("click", ()=>{
|
||||||
|
fabMenu.classList.remove("open"); fab.classList.remove("open");
|
||||||
|
makeWidget(REGISTRY.find(d=>d.id==="anchor"));
|
||||||
|
});
|
||||||
fabMenu.querySelector('[data-f="draw"]').addEventListener("click", ()=>{
|
fabMenu.querySelector('[data-f="draw"]').addEventListener("click", ()=>{
|
||||||
fabMenu.classList.remove("open"); fab.classList.remove("open");
|
fabMenu.classList.remove("open"); fab.classList.remove("open");
|
||||||
setPen(!document.body.classList.contains("pen"));
|
setPen(!document.body.classList.contains("pen"));
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
/* version — shown until /api/version resolves (or if the fetch fails, e.g. offline).
|
/* version — shown until /api/version resolves (or if the fetch fails, e.g. offline).
|
||||||
Kept in sync by hand with the VERSION file at the repo root on every release. */
|
Kept in sync by hand with the VERSION file at the repo root on every release. */
|
||||||
const VERSION = "0.3.30-beta";
|
const VERSION = "0.3.31-beta";
|
||||||
(function(){
|
(function(){
|
||||||
const tag = document.getElementById("verTag");
|
const tag = document.getElementById("verTag");
|
||||||
tag.textContent = "v"+VERSION;
|
tag.textContent = "v"+VERSION;
|
||||||
|
|
@ -106,7 +106,8 @@ const I18N = {
|
||||||
wg_hak:"Hakken & plakken", wg_hak_d:"Woorden in klanken hakken en weer plakken, met voorlezen.",
|
wg_hak:"Hakken & plakken", wg_hak_d:"Woorden in klanken hakken en weer plakken, met voorlezen.",
|
||||||
hakChop:"✂️ Hak", hakGlue:"🔗 Plak", hakSay:"🔊 Lees voor",
|
hakChop:"✂️ Hak", hakGlue:"🔗 Plak", hakSay:"🔊 Lees voor",
|
||||||
wg_ball:"Ballonnenwoord", wg_ball_d:"Raad het woord letter voor letter voordat de ballonnen knappen.",
|
wg_ball:"Ballonnenwoord", wg_ball_d:"Raad het woord letter voor letter voordat de ballonnen knappen.",
|
||||||
wg_anchor:"Ankerwoorden", wg_anchor_d:"Onbeperkt woordraster rond een thema: elk woord hoort bij de woorden eromheen.",
|
wg_anchor:"Ankerwoorden", wg_anchor_d:"Woordweb voor woordenschatonderwijs: leer woorden in samenhang rond een themawoord (het anker), met plaatjes. Elk woord verankert aan de woorden eromheen.",
|
||||||
|
fabAnchor:"Ankerdiagram (woordweb)",
|
||||||
wg_birthday:"Verjaardagstaart", wg_birthday_d:"Maak een persoonlijke taart met naam, leeftijd, kleuren, lagen, versiering en kaarsjes.",
|
wg_birthday:"Verjaardagstaart", wg_birthday_d:"Maak een persoonlijke taart met naam, leeftijd, kleuren, lagen, versiering en kaarsjes.",
|
||||||
birthdayName:"naam van de jarige", birthdayAge:"Leeftijd", birthdayLayers:"Lagen", birthdayCakeColor:"Taart", birthdayIcing:"Glazuur", birthdayPlate:"Bord",
|
birthdayName:"naam van de jarige", birthdayAge:"Leeftijd", birthdayLayers:"Lagen", birthdayCakeColor:"Taart", birthdayIcing:"Glazuur", birthdayPlate:"Bord",
|
||||||
birthdayCandles:"Kaarsjes", birthdayCelebrate:"🎉 Vieren!", birthdayTitle:"Er is er één jarig!", birthdayFor:"Hoera voor {name}!",
|
birthdayCandles:"Kaarsjes", birthdayCelebrate:"🎉 Vieren!", birthdayTitle:"Er is er één jarig!", birthdayFor:"Hoera voor {name}!",
|
||||||
|
|
@ -126,7 +127,7 @@ const I18N = {
|
||||||
wg_sentence:"Zinsbouwer", wg_sentence_d:"Bouw zinnen met kleurgecodeerde zinsdelen en voeg eigen woorden toe.",
|
wg_sentence:"Zinsbouwer", wg_sentence_d:"Bouw zinnen met kleurgecodeerde zinsdelen en voeg eigen woorden toe.",
|
||||||
sentence_who:"Wie?", sentence_does:"Doet wat?", sentence_what:"Wat of waar?", sentenceHint:"Kies woorden om een zin te maken…",
|
sentence_who:"Wie?", sentence_does:"Doet wat?", sentence_what:"Wat of waar?", sentenceHint:"Kies woorden om een zin te maken…",
|
||||||
sentenceAdd:"eigen woord of zinsdeel…", sentenceClear:"Wissen", sentenceSpeak:"🔊 Lees voor", sentenceRemove:"Verwijder woord",
|
sentenceAdd:"eigen woord of zinsdeel…", sentenceClear:"Wissen", sentenceSpeak:"🔊 Lees voor", sentenceRemove:"Verwijder woord",
|
||||||
anchorPh:"thema…", anchorHint:"Tik op een vak en typ · sleep de achtergrond om te schuiven",
|
anchorPh:"thema…", anchorHint:"Woordweb: zet het themawoord in het midden en bouw eromheen · tik op een vak en typ · sleep om te schuiven",
|
||||||
anchorHintReadonly:"Sleep de achtergrond om te schuiven",
|
anchorHintReadonly:"Sleep de achtergrond om te schuiven",
|
||||||
anchorColor:"Kleur: klik om te wisselen (verbind woorden met dezelfde kleur)",
|
anchorColor:"Kleur: klik om te wisselen (verbind woorden met dezelfde kleur)",
|
||||||
ballWin:"Geraden! 🎉", ballLose:"Helaas! Het woord was:",
|
ballWin:"Geraden! 🎉", ballLose:"Helaas! Het woord was:",
|
||||||
|
|
@ -289,7 +290,8 @@ const I18N = {
|
||||||
wg_hak:"Chop & blend", wg_hak_d:"Chop words into sounds and blend them back, with read-aloud.",
|
wg_hak:"Chop & blend", wg_hak_d:"Chop words into sounds and blend them back, with read-aloud.",
|
||||||
hakChop:"✂️ Chop", hakGlue:"🔗 Blend", hakSay:"🔊 Read aloud",
|
hakChop:"✂️ Chop", hakGlue:"🔗 Blend", hakSay:"🔊 Read aloud",
|
||||||
wg_ball:"Balloon word", wg_ball_d:"Guess the word letter by letter before the balloons pop.",
|
wg_ball:"Balloon word", wg_ball_d:"Guess the word letter by letter before the balloons pop.",
|
||||||
wg_anchor:"Anchor words", wg_anchor_d:"Unlimited word grid around a theme: every word relates to its neighbours.",
|
wg_anchor:"Anchor words", wg_anchor_d:"Word web for vocabulary teaching: learn words in meaningful clusters around a theme word (the anchor), with pictures. Every word anchors to its neighbours.",
|
||||||
|
fabAnchor:"Anchor diagram (word web)",
|
||||||
wg_birthday:"Birthday cake", wg_birthday_d:"Create a personal cake with a name, age, colours, layers, decorations and candles.",
|
wg_birthday:"Birthday cake", wg_birthday_d:"Create a personal cake with a name, age, colours, layers, decorations and candles.",
|
||||||
birthdayName:"birthday person's name", birthdayAge:"Age", birthdayLayers:"Layers", birthdayCakeColor:"Cake", birthdayIcing:"Icing", birthdayPlate:"Plate",
|
birthdayName:"birthday person's name", birthdayAge:"Age", birthdayLayers:"Layers", birthdayCakeColor:"Cake", birthdayIcing:"Icing", birthdayPlate:"Plate",
|
||||||
birthdayCandles:"Candles", birthdayCelebrate:"🎉 Celebrate!", birthdayTitle:"Someone has a birthday!", birthdayFor:"Hooray for {name}!",
|
birthdayCandles:"Candles", birthdayCelebrate:"🎉 Celebrate!", birthdayTitle:"Someone has a birthday!", birthdayFor:"Hooray for {name}!",
|
||||||
|
|
@ -309,7 +311,7 @@ const I18N = {
|
||||||
wg_sentence:"Sentence builder", wg_sentence_d:"Build sentences with colour-coded parts and add your own words.",
|
wg_sentence:"Sentence builder", wg_sentence_d:"Build sentences with colour-coded parts and add your own words.",
|
||||||
sentence_who:"Who?", sentence_does:"Does what?", sentence_what:"What or where?", sentenceHint:"Choose words to build a sentence…",
|
sentence_who:"Who?", sentence_does:"Does what?", sentence_what:"What or where?", sentenceHint:"Choose words to build a sentence…",
|
||||||
sentenceAdd:"your own word or phrase…", sentenceClear:"Clear", sentenceSpeak:"🔊 Read aloud", sentenceRemove:"Remove word",
|
sentenceAdd:"your own word or phrase…", sentenceClear:"Clear", sentenceSpeak:"🔊 Read aloud", sentenceRemove:"Remove word",
|
||||||
anchorPh:"theme…", anchorHint:"Tap a cell and type · drag the background to pan",
|
anchorPh:"theme…", anchorHint:"Word web: put the theme word in the middle and build around it · tap a cell and type · drag to pan",
|
||||||
anchorHintReadonly:"Drag the background to pan",
|
anchorHintReadonly:"Drag the background to pan",
|
||||||
anchorColor:"Colour: click to cycle (connect words with the same colour)",
|
anchorColor:"Colour: click to cycle (connect words with the same colour)",
|
||||||
ballWin:"You got it! 🎉", ballLose:"Oh no! The word was:",
|
ballWin:"You got it! 🎉", ballLose:"Oh no! The word was:",
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue