11 lines
17 KiB
HTML
11 lines
17 KiB
HTML
<!doctypehtml><html lang="en"><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1"><title>German Word Trainer | cffy.in</title><script src="https://cdn.tailwindcss.com"></script><link rel="preconnect"href="https://fonts.googleapis.com"><link rel="preconnect"href="https://fonts.gstatic.com"crossorigin><style>.font-impact{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif}.font-comic{font-family:"Comic Sans MS","Comic Sans",cursive}.feedback-correct{animation:flash-green .5s ease-out}.feedback-incorrect{animation:flash-red .5s ease-out}@keyframes flash-green{0%{background-color:transparent}50%{background-color:#4ade80;color:#14532d}100%{background-color:transparent}}@keyframes flash-red{0%{background-color:transparent}50%{background-color:#f472b6;color:#831843}100%{background-color:transparent}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:10}.modal-content{background:#fef3c7;padding:2rem;border-radius:.5rem;width:90%;max-width:400px;border:4px solid #78350f}</style><body class="antialiased font-comic"><nav class="bg-white/70 backdrop-blur-sm border-b-2 border-amber-800 p-3 sticky top-0 z-20"><div class="max-w-6xl mx-auto flex justify-between items-center font-impact text-amber-900"><a href="index.html"class="text-2xl font-black hover:text-amber-700 transition-colors">cffyin</a><div class="flex gap-6 text-lg items-center"><a href="index.html"class="hover:underline">Home</a> <a href="german.html"class="hover:underline">German Trainer</a> <a href="game.html"class="hover:underline">Hex-a-Row</a></div></div></nav><div class="min-h-screen bg-amber-50 relative overflow-hidden flex items-center justify-center p-4"><div style="background-image:radial-gradient(circle,#000 1px,transparent 1px);background-size:20px 20px"class="absolute inset-0 opacity-10"></div><div class="absolute top-20 left-10 text-6xl opacity-20 animate-bounce">🇩🇪</div><div class="absolute top-40 right-20 text-4xl opacity-20 animate-pulse">✨</div><div class="absolute bottom-40 left-20 text-5xl opacity-20 animate-bounce">👍</div><div class="w-full max-w-2xl mx-auto bg-cyan-400 border-4 border-cyan-600 shadow-lg p-6 md:p-8 transform -rotate-1"><header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 pb-4 border-b-4 border-dashed border-cyan-800"><div><h1 class="font-impact text-3xl md:text-4xl font-black text-cyan-900"style="text-shadow:2px 2px 0 rgba(255,255,255,.5)">Lern mit mir!</h1><p class="text-cyan-800 font-bold">German Word Trainer</div><div class="mt-4 sm:mt-0 text-right"><div class="font-impact text-lg font-semibold text-cyan-900">Score</div><div class="text-3xl font-black text-white"style="text-shadow:2px 2px 0 #0891b2"><span id="score">0</span> <span id="score-percentage"class="text-xl text-cyan-800 font-medium ml-1"></span></div></div></header><main id="app-container"><div class="mb-6"><div class="flex items-center gap-2 mb-2"><h3 class="text-sm font-impact text-cyan-900">LEARNING PROGRESS</h3><div class="relative group flex items-center"><svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="currentColor"class="text-cyan-800 cursor-pointer"viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.064.293.006.399.287.47l.45.082.082-.38-2.29-.287zM8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg><div class="absolute bottom-full mb-2 w-64 bg-slate-800 text-white text-xs rounded-lg py-2 px-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none z-10 -translate-x-1/2 left-1/2">Correct answers move a word to the next box. Incorrect answers move it back. Words in higher boxes appear less frequently. <svg class="absolute text-slate-800 h-2 w-full left-0 top-full"x="0px"y="0px"viewBox="0 0 255 255"xml:space="preserve"><polygon class="fill-current"points="0,0 127.5,127.5 255,0"/></svg></div></div></div><div id="progress-container"class="space-y-3"></div></div><div class="bg-cyan-100 border-2 border-cyan-800 p-6 text-center"><p class="text-lg text-cyan-900 font-bold mb-2">The english word is:<h2 id="english-word"class="font-impact text-4xl md:text-5xl font-black text-cyan-900 mb-6 min-h-[60px] flex items-center justify-center"style="text-shadow:2px 2px 0 #a5f3fc">Loading...</h2><div id="typing-container"><p class="text-cyan-800 font-bold mb-2">Type the German translation:</p><input id="german-input"class="w-full max-w-md mx-auto p-3 border-4 border-cyan-600 bg-cyan-50 rounded-none text-xl text-center focus:ring-2 focus:ring-pink-400 focus:border-pink-400 transition"placeholder="e.g. die Frau"autocomplete="off"autocorrect="off"autocapitalize="off"spellcheck="false"> <button id="submit-answer"class="mt-4 w-full max-w-md mx-auto bg-lime-400 text-lime-900 font-impact text-xl font-black py-3 px-4 border-4 border-lime-600 hover:bg-lime-300 transition-colors duration-200">Submit Answer (+5 pts)</button></div><div id="multiple-choice-container"class="hidden mt-4"><p class="text-cyan-800 font-bold mb-3">Or select the correct translation:<div id="choices"class="grid grid-cols-1 gap-3 max-w-md mx-auto"></div></div></div><div class="text-center mt-6"><button id="show-choices-btn"class="text-cyan-900 hover:text-white font-bold transition-colors">I need a hint (-2 pts potential)</button></div><div id="feedback"class="mt-4 text-center text-xl font-black min-h-[30px] font-impact"></div></main></div></div><div id="spelling-modal"class="modal-overlay hidden"><div class="modal-content text-center"><h3 class="font-impact text-2xl font-bold mb-2 text-amber-900">Correct Choice!</h3><p class="text-amber-800 mb-4 font-bold">Now, type the word to confirm the spelling and earn 3 points.</p><input id="spelling-input"class="w-full p-3 border-4 border-amber-800 bg-amber-50 rounded-none text-xl text-center focus:ring-2 focus:ring-pink-400 focus:border-pink-400 transition"autocomplete="off"autocorrect="off"autocapitalize="off"spellcheck="false"><div id="spelling-feedback"class="mt-2 text-lg font-semibold min-h-[28px]"></div><button id="submit-spelling"class="mt-4 w-full bg-green-400 text-green-900 font-impact text-xl font-black py-3 px-4 border-4 border-green-600 hover:bg-green-300 transition-colors">Confirm Spelling</button><p class="text-sm text-amber-700 mt-2">Incorrect spelling will cost 1 point.</div></div><script>document.addEventListener("DOMContentLoaded",()=>{let e=document.getElementById("score"),n=document.getElementById("score-percentage"),t=document.getElementById("english-word"),a=document.getElementById("german-input");var g=document.getElementById("submit-answer");let r=document.getElementById("feedback"),s=document.getElementById("show-choices-btn"),l=document.getElementById("multiple-choice-container"),i=document.getElementById("choices"),h=document.getElementById("typing-container"),o=document.getElementById("progress-container"),m=document.getElementById("spelling-modal"),d=document.getElementById("spelling-input");var c=document.getElementById("submit-spelling");let u=document.getElementById("spelling-feedback"),b=[{german:"der Mann",english:"the man"},{german:"die Frau",english:"the woman"},{german:"das Kind",english:"the child"},{german:"die Zeit",english:"the time"},{german:"der Tag",english:"the day"},{german:"das Jahr",english:"the year"},{german:"die Welt",english:"the world"},{german:"die Hand",english:"the hand"},{german:"das Auge",english:"the eye"},{german:"das Leben",english:"the life"},{german:"der Freund",english:"the friend (male)"},{german:"die Freundin",english:"the friend (female)"},{german:"die Schule",english:"the school"},{german:"das Haus",english:"the house"},{german:"die Stadt",english:"the city"},{german:"das Land",english:"the country"},{german:"die Arbeit",english:"the work"},{german:"das Geld",english:"the money"},{german:"die Frage",english:"the question"},{german:"die Antwort",english:"the answer"},{german:"sein",english:"to be"},{german:"haben",english:"to have"},{german:"werden",english:"to become"},{german:"können",english:"can, to be able to"},{german:"müssen",english:"must, to have to"},{german:"sagen",english:"to say"},{german:"machen",english:"to do, to make"},{german:"geben",english:"to give"},{german:"kommen",english:"to come"},{german:"sollen",english:"should, ought to"},{german:"wollen",english:"to want"},{german:"gehen",english:"to go"},{german:"wissen",english:"to know (a fact)"},{german:"sehen",english:"to see"},{german:"lassen",english:"to let, to allow"},{german:"stehen",english:"to stand"},{german:"finden",english:"to find"},{german:"bleiben",english:"to stay"},{german:"liegen",english:"to lie, be located"},{german:"heißen",english:"to be called"},{german:"denken",english:"to think"},{german:"nehmen",english:"to take"},{german:"tun",english:"to do"},{german:"dürfen",english:"may, to be allowed"},{german:"glauben",english:"to believe"},{german:"halten",english:"to hold, to stop"},{german:"nennen",english:"to name, to call"},{german:"mögen",english:"to like"},{german:"zeigen",english:"to show"},{german:"führen",english:"to lead"},{german:"sprechen",english:"to speak"},{german:"bringen",english:"to bring, take"},{german:"leben",english:"to live"},{german:"fahren",english:"to drive, to go"},{german:"meinen",english:"to think, to mean"},{german:"fragen",english:"to ask"},{german:"kennen",english:"to know (a person)"},{german:"gelten",english:"to be valid"},{german:"stellen",english:"to place, to set"},{german:"spielen",english:"to play"},{german:"arbeiten",english:"to work"},{german:"brauchen",english:"to need"},{german:"folgen",english:"to follow"},{german:"lernen",english:"to learn"},{german:"bestehen",english:"to exist, to pass"},{german:"verstehen",english:"to understand"},{german:"setzen",english:"to set, put, place"},{german:"bekommen",english:"to get, receive"},{german:"beginnen",english:"to begin"},{german:"erzählen",english:"to tell, narrate"},{german:"versuchen",english:"to try, attempt"},{german:"schreiben",english:"to write"},{german:"laufen",english:"to run, walk"},{german:"erklären",english:"to explain"},{german:"entsprechen",english:"to correspond"},{german:"sitzen",english:"to sit"},{german:"ziehen",english:"to pull, to move"},{german:"scheinen",english:"to seem, to shine"},{german:"fallen",english:"to fall"},{german:"gehören",english:"to belong to"},{german:"entstehen",english:"to originate, arise"},{german:"erhalten",english:"to receive"},{german:"treffen",english:"to meet"},{german:"suchen",english:"to search, look for"},{german:"legen",english:"to lay, put down"},{german:"vorstellen",english:"to introduce, imagine"},{german:"handeln",english:"to act, to trade"},{german:"erreichen",english:"to achieve, reach"},{german:"tragen",english:"to carry, to wear"},{german:"schaffen",english:"to manage, to create"},{german:"lesen",english:"to read"},{german:"verlieren",english:"to lose"},{german:"darstellen",english:"to depict, represent"},{german:"erkennen",english:"to recognize"},{german:"entwickeln",english:"to develop"},{german:"reden",english:"to talk, to speak"},{german:"aussehen",english:"to look like"},{german:"erscheinen",english:"to appear"},{german:"bilden",english:"to form, to educate"},{german:"anfangen",english:"to begin"},{german:"erwarten",english:"to expect"},{german:"wohnen",english:"to live, reside"},{german:"das Wasser",english:"the water"},{german:"das Feuer",english:"the fire"},{german:"die Luft",english:"the air"},{german:"die Erde",english:"the earth"},{german:"der Himmel",english:"the sky, heaven"},{german:"der Stern",english:"the star"},{german:"die Sonne",english:"the sun"},{german:"der Mond",english:"the moon"},{german:"der Weg",english:"the way, path"},{german:"das Ende",english:"the end"},{german:"der Anfang",english:"the beginning"},{german:"der Teil",english:"the part"},{german:"das Ganze",english:"the whole"},{german:"die Zahl",english:"the number"},{german:"das Wort",english:"the word"},{german:"der Satz",english:"the sentence"},{german:"das Buch",english:"the book"},{german:"die Seite",english:"the page"},{german:"der Name",english:"the name"},{german:"der Herr",english:"the gentleman, Mr."},{german:"der Gott",english:"the god"},{german:"essen",english:"to eat"},{german:"trinken",english:"to drink"},{german:"schlafen",english:"to sleep"},{german:"sterben",english:"to die"},{german:"kaufen",english:"to buy"},{german:"verkaufen",english:"to sell"},{german:"bezahlen",english:"to pay"},{german:"öffnen",english:"to open"},{german:"schließen",english:"to close"},{german:"warten",english:"to wait"},{german:"helfen",english:"to help"},{german:"singen",english:"to sing"},{german:"tanzen",english:"to dance"},{german:"lachen",english:"to laugh"},{german:"weinen",english:"to cry"},{german:"gut",english:"good"},{german:"schlecht",english:"bad"},{german:"groß",english:"big, large"},{german:"klein",english:"small, little"},{german:"neu",english:"new"},{german:"alt",english:"old"},{german:"jung",english:"young"},{german:"schön",english:"beautiful"},{german:"hässlich",english:"ugly"},{german:"richtig",english:"right, correct"},{german:"falsch",english:"wrong, false"},{german:"wichtig",english:"important"},{german:"einfach",english:"easy, simple"},{german:"schwer",english:"hard, difficult"},{german:"schnell",english:"fast"},{german:"langsam",english:"slow"},{german:"viel",english:"much, a lot"},{german:"wenig",english:"little, few"},{german:"mehr",english:"more"},{german:"weniger",english:"less"},{german:"hier",english:"here"},{german:"dort",english:"there"},{german:"jetzt",english:"now"},{german:"dann",english:"then"},{german:"heute",english:"today"},{german:"morgen",english:"tomorrow"},{german:"gestern",english:"yesterday"},{german:"immer",english:"always"},{german:"nie",english:"never"},{german:"oft",english:"often"},{german:"selten",english:"seldom, rarely"},{german:"vielleicht",english:"perhaps, maybe"},{german:"sicher",english:"sure, certain"},{german:"nur",english:"only"},{german:"auch",english:"also, too"},{german:"aber",english:"but"},{german:"oder",english:"or"},{german:"und",english:"and"},{german:"weil",english:"because"},{german:"dass",english:"that"},{german:"wenn",english:"if, when"},{german:"als",english:"when, as"}],f=0,p=null,w=[],v=5,y=5*b.length,k=()=>{localStorage.setItem("germanTrainerData",JSON.stringify({score:f,words:w}))};let L=()=>{e.textContent=f,n.textContent=0<y?`(${(f/y*100).toFixed(1)}%)`:"(0.0%)"},x=()=>{o.innerHTML="";let n=Array(v).fill(0);w.forEach(e=>{e.box<v&&n[e.box]++}),n.forEach((e,n)=>{var t=e/w.length*100;o.innerHTML+=`
|
|
<div>
|
|
<div class="flex justify-between mb-1">
|
|
<span class="text-xs font-bold ${0===n?"text-pink-700":"text-cyan-800"}">Box ${n+1}</span>
|
|
<span class="text-xs font-bold text-cyan-900">${e}/${w.length}</span>
|
|
</div>
|
|
<div class="w-full bg-cyan-200 border-2 border-cyan-800 h-4 p-0.5">
|
|
<div class="bg-lime-400 h-full" style="width: ${t}%"></div>
|
|
</div>
|
|
</div>
|
|
`})},E=()=>{let n=Math.min(...w.map(e=>e.box));var e;n>=v?(t.textContent="All words mastered!",h.classList.add("hidden"),s.classList.add("hidden")):(e=w.filter(e=>e.box===n),p=e[Math.floor(Math.random()*e.length)],t.textContent=p.english,a.value="",a.focus(),r.innerHTML="",r.className="mt-4 text-center text-xl font-black min-h-[30px] font-impact",l.classList.add("hidden"),h.classList.remove("hidden"),s.classList.remove("hidden"))},I=e=>{f+=e,p.box++,M(`Correct! +${e} pts`,!0),setTimeout(()=>{E(),x()},1e3)},B=()=>{p.box=Math.max(0,p.box-1);var e=a.value.trim(),e=z(e,p.german);M(`Incorrect! It's: <span class="font-mono tracking-wider">${e}</span>`,!1),setTimeout(()=>{E(),x()},2500)},M=(e,n)=>{r.innerHTML=e,r.classList.add(n?"feedback-correct":"feedback-incorrect"),L(),k()},T=()=>{a.value.trim().toLowerCase()===p.german.toLowerCase()?I(5):B()};let C=()=>{var e=d.value.trim().toLowerCase();e===p.german.toLowerCase()?(m.classList.add("hidden"),I(3)):(f=Math.max(0,f-1),L(),k(),e=z(e,p.german),u.innerHTML="Not quite: "+e,d.focus())},z=(e,n)=>{let t="";var a=e.toLowerCase(),g=n.toLowerCase();for(let e=0;e<n.length;e++){var r=n[e];e<a.length&&a[e]===g[e]?t+=`<span class="text-green-600">${r}</span>`:t+=`<span class="text-red-500 underline">${r}</span>`}return t};g.addEventListener("click",T),a.addEventListener("keypress",e=>"Enter"===e.key&&T()),s.addEventListener("click",()=>{h.classList.add("hidden"),l.classList.remove("hidden"),s.classList.add("hidden");var e=w.filter(e=>e.german!==p.german).sort(()=>.5-Math.random()).slice(0,2),e=[p,...e].sort(()=>.5-Math.random());i.innerHTML="",e.forEach(e=>{var n=document.createElement("button");n.textContent=e.german,n.classList.add("w-full","p-3","border-4","border-cyan-600","bg-cyan-200","text-lg","font-bold","hover:bg-lime-300","transition-colors"),n.dataset.german=e.german,i.appendChild(n)})}),i.addEventListener("click",e=>{"BUTTON"===e.target.tagName&&(e.target.dataset.german===p.german?(m.classList.remove("hidden"),d.value="",u.innerHTML="",d.focus()):B())}),c.addEventListener("click",C),d.addEventListener("keypress",e=>"Enter"===e.key&&C()),(()=>{var e=localStorage.getItem("germanTrainerData");if(e){e=JSON.parse(e);if(e.words.length===b.length&&e.words[e.words.length-1].german===b[b.length-1].german)return f=e.score,w=e.words,!0}return!1})()||(f=0,w=b.map(e=>({...e,box:0}))),L(),x(),E()})</script> |