Spaces:
Running
Running
| <html lang="ro"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Antrenament Chimie - Substituție & Formule</title> | |
| <!-- Librăria pentru afișarea formulelor chimice frumoase (LaTeX) --> | |
| <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> | |
| <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> | |
| <style> | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background-color: #f0f2f5; | |
| color: #333; | |
| margin: 0; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| } | |
| /* ZONA DE JOC */ | |
| .game-card { | |
| background: white; | |
| padding: 30px; | |
| border-radius: 15px; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.1); | |
| text-align: center; | |
| margin-bottom: 40px; | |
| border-top: 5px solid #007bff; | |
| } | |
| h1 { color: #007bff; } | |
| .score-board { | |
| font-size: 1.2em; | |
| margin-bottom: 20px; | |
| font-weight: bold; | |
| color: #555; | |
| } | |
| .question-area { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 15px; | |
| margin: 30px 0; | |
| } | |
| @media (min-width: 600px) { | |
| .question-area { | |
| flex-direction: row; | |
| justify-content: center; | |
| align-items: baseline; | |
| } | |
| } | |
| .question-text { | |
| font-size: 1.5em; | |
| font-weight: 500; | |
| } | |
| input[type="text"] { | |
| padding: 10px 15px; | |
| font-size: 1.2em; | |
| border: 2px solid #ddd; | |
| border-radius: 8px; | |
| width: 150px; | |
| text-align: center; | |
| transition: border-color 0.3s; | |
| } | |
| input[type="text"]:focus { | |
| border-color: #007bff; | |
| outline: none; | |
| } | |
| button { | |
| background-color: #007bff; | |
| color: white; | |
| border: none; | |
| padding: 12px 25px; | |
| font-size: 1.1em; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| margin-top: 10px; | |
| } | |
| button:hover { background-color: #0056b3; } | |
| .feedback { | |
| margin-top: 20px; | |
| font-size: 1.2em; | |
| min-height: 60px; | |
| } | |
| .correct { color: #28a745; font-weight: bold; } | |
| .wrong { color: #dc3545; font-weight: bold; } | |
| .latex-display { | |
| font-size: 1.5em; | |
| margin-top: 10px; | |
| color: #333; | |
| } | |
| .hint { | |
| font-size: 0.9em; | |
| color: #888; | |
| margin-top: 5px; | |
| } | |
| /* TABELE CU LISTE */ | |
| .study-area { | |
| background: white; | |
| padding: 30px; | |
| border-radius: 15px; | |
| box-shadow: 0 4px 10px rgba(0,0,0,0.05); | |
| } | |
| h2 { border-bottom: 2px solid #eee; padding-bottom: 10px; margin-top: 30px; } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-bottom: 20px; | |
| } | |
| th, td { | |
| padding: 12px; | |
| text-align: left; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| th { background-color: #f8f9fa; color: #007bff; } | |
| tr:hover { background-color: #f1f1f1; } | |
| .category-tag { | |
| display: inline-block; | |
| padding: 3px 8px; | |
| border-radius: 4px; | |
| font-size: 0.8em; | |
| font-weight: bold; | |
| color: white; | |
| } | |
| .tag-acid { background-color: #e74c3c; } | |
| .tag-baza { background-color: #3498db; } | |
| .tag-sare { background-color: #27ae60; } | |
| .tag-oxid { background-color: #f39c12; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <!-- JOCUL --> | |
| <div class="game-card"> | |
| <h1>🎮 Antrenament Test Chimie</h1> | |
| <div class="score-board">Scor: <span id="score">0</span> | Întrebarea: <span id="q-count">1</span></div> | |
| <div class="question-area"> | |
| <div class="question-text" id="question">Se încarcă...</div> | |
| <input type="text" id="user-input" placeholder="Ex: H2SO4" autocomplete="off"> | |
| </div> | |
| <p class="hint">Scrie legat, respectă literele mari/mici (Ex: NaCl, nu nacl). Nu îți face griji pentru indici (scrii P2O5).</p> | |
| <button onclick="checkAnswer()" id="btn-check">Verifică</button> | |
| <button onclick="nextQuestion()" id="btn-next" style="display:none; background-color: #6c757d;">Următoarea</button> | |
| <div class="feedback" id="feedback"></div> | |
| </div> | |
| <!-- LISTA DE ÎNVĂȚAT --> | |
| <div class="study-area"> | |
| <h1>📚 Lista Completă </h1> | |
| <h2>1. Acizi (Hidracizi & Oxiacizi)</h2> | |
| <table> | |
| <tr><th>Nume</th><th>Formula </th><th>Tip</th></tr> | |
| <tr><td>Acid Clorhidric</td><td>HCl</td><td><span class="category-tag tag-acid">Hidracid</span></td></tr> | |
| <tr><td>Acid Sulfhidric</td><td>H2S</td><td><span class="category-tag tag-acid">Hidracid</span></td></tr> | |
| <tr><td>Acid Sulfuric</td><td>H2SO4</td><td><span class="category-tag tag-acid">Oxiacid</span></td></tr> | |
| <tr><td>Acid Sulfuros</td><td>H2SO3</td><td><span class="category-tag tag-acid">Oxiacid</span></td></tr> | |
| <tr><td>Acid Azotic</td><td>HNO3</td><td><span class="category-tag tag-acid">Oxiacid</span></td></tr> | |
| <tr><td>Acid Carbonic</td><td>H2CO3</td><td><span class="category-tag tag-acid">Oxiacid</span></td></tr> | |
| <tr><td>Acid Fosforic</td><td>H3PO4</td><td><span class="category-tag tag-acid">Oxiacid</span></td></tr> | |
| </table> | |
| <h2>2. Oxizi (Acizi & Bazici)</h2> | |
| <table> | |
| <tr><th>Nume</th><th>Formula </th><th>Tip</th></tr> | |
| <tr><td>Oxid de Magneziu</td><td>MgO</td><td><span class="category-tag tag-oxid">Oxid Bazic</span></td></tr> | |
| <tr><td>Oxid de Calciu (Var nestins)</td><td>CaO</td><td><span class="category-tag tag-oxid">Oxid Bazic</span></td></tr> | |
| <tr><td>Oxid de Cupru (II)</td><td>CuO</td><td><span class="category-tag tag-oxid">Oxid Bazic</span></td></tr> | |
| <tr><td>Oxid de Zinc</td><td>ZnO</td><td><span class="category-tag tag-oxid">Oxid Bazic</span></td></tr> | |
| <tr><td>Dioxid de Carbon</td><td>CO2</td><td><span class="category-tag tag-oxid">Oxid Acid</span></td></tr> | |
| <tr><td>Dioxid de Sulf</td><td>SO2</td><td><span class="category-tag tag-oxid">Oxid Acid</span></td></tr> | |
| <tr><td>Trioxid de Sulf</td><td>SO3</td><td><span class="category-tag tag-oxid">Oxid Acid</span></td></tr> | |
| <tr><td>Pentaoxid de Fosfor</td><td>P2O5</td><td><span class="category-tag tag-oxid">Oxid Acid</span></td></tr> | |
| </table> | |
| <h2>3. Baze (Hidroxizi)</h2> | |
| <table> | |
| <tr><th>Nume</th><th>Formula </th><th>Comentariu</th></tr> | |
| <tr><td>Hidroxid de Sodiu (Soda caustică)</td><td>NaOH</td><td>Bază tare</td></tr> | |
| <tr><td>Hidroxid de Potasiu</td><td>KOH</td><td>Bază tare</td></tr> | |
| <tr><td>Hidroxid de Calciu (Var stins)</td><td>Ca(OH)2</td><td>-</td></tr> | |
| <tr><td>Hidroxid de Magneziu</td><td>Mg(OH)2</td><td>-</td></tr> | |
| <tr><td>Hidroxid de Aluminiu</td><td>Al(OH)3</td><td>Precipitat alb gelatinos</td></tr> | |
| <tr><td>Hidroxid de Cupru (II)</td><td>Cu(OH)2</td><td>Precipitat albastru</td></tr> | |
| <tr><td>Hidroxid de Fier (III)</td><td>Fe(OH)3</td><td>Precipitat roșu-cărămiziu</td></tr> | |
| </table> | |
| <h2>4. Săruri (Rezultate din substituție)</h2> | |
| <table> | |
| <tr><th>Nume</th><th>Formula </th><th>Proveniență</th></tr> | |
| <tr><td>Clorură de Sodiu (Sare de bucătărie)</td><td>NaCl</td><td>din HCl</td></tr> | |
| <tr><td>Clorură de Zinc</td><td>ZnCl2</td><td>din HCl</td></tr> | |
| <tr><td>Clorură Ferică (Fier III)</td><td>FeCl3</td><td>din HCl + Cl2</td></tr> | |
| <tr><td>Clorură Feroasă (Fier II)</td><td>FeCl2</td><td>din HCl + Fe</td></tr> | |
| <tr><td>Sulfat de Cupru (Piatra vânătă)</td><td>CuSO4</td><td>din H2SO4</td></tr> | |
| <tr><td>Sulfat de Zinc</td><td>ZnSO4</td><td>din H2SO4</td></tr> | |
| <tr><td>Sulfat de Aluminiu</td><td>Al2(SO4)3</td><td>din H2SO4</td></tr> | |
| <tr><td>Azotat de Argint</td><td>AgNO3</td><td>din HNO3</td></tr> | |
| <tr><td>Carbonat de Calciu (Cretă)</td><td>CaCO3</td><td>din H2CO3</td></tr> | |
| </table> | |
| </div> | |
| </div> | |
| <script> | |
| // Baza de date cu substanțe | |
| const database = [ | |
| // Acizi | |
| { name: "Acid Clorhidric", formula: "HCl", latex: "HCl" }, | |
| { name: "Acid Sulfuric", formula: "H2SO4", latex: "H_2SO_4" }, | |
| { name: "Acid Azotic", formula: "HNO3", latex: "HNO_3" }, | |
| { name: "Acid Sulfhidric", formula: "H2S", latex: "H_2S" }, | |
| { name: "Acid Carbonic", formula: "H2CO3", latex: "H_2CO_3" }, | |
| { name: "Acid Fosforic", formula: "H3PO4", latex: "H_3PO_4" }, | |
| // Oxizi | |
| { name: "Dioxid de Carbon", formula: "CO2", latex: "CO_2" }, | |
| { name: "Pentaoxid de Fosfor", formula: "P2O5", latex: "P_2O_5" }, | |
| { name: "Oxid de Calciu", formula: "CaO", latex: "CaO" }, | |
| { name: "Oxid de Magneziu", formula: "MgO", latex: "MgO" }, | |
| { name: "Oxid de Aluminiu", formula: "Al2O3", latex: "Al_2O_3" }, | |
| { name: "Trioxid de Sulf", formula: "SO3", latex: "SO_3" }, | |
| // Baze | |
| { name: "Hidroxid de Sodiu", formula: "NaOH", latex: "NaOH" }, | |
| { name: "Hidroxid de Calciu", formula: "Ca(OH)2", latex: "Ca(OH)_2" }, | |
| { name: "Hidroxid de Aluminiu", formula: "Al(OH)3", latex: "Al(OH)_3" }, | |
| { name: "Hidroxid de Cupru", formula: "Cu(OH)2", latex: "Cu(OH)_2" }, | |
| // Săruri (astea sunt grelele) | |
| { name: "Clorură de Sodiu", formula: "NaCl", latex: "NaCl" }, | |
| { name: "Clorură de Zinc", formula: "ZnCl2", latex: "ZnCl_2" }, | |
| { name: "Clorură Ferică (Fier III)", formula: "FeCl3", latex: "FeCl_3" }, | |
| { name: "Sulfat de Cupru", formula: "CuSO4", latex: "CuSO_4" }, | |
| { name: "Sulfat de Aluminiu", formula: "Al2(SO4)3", latex: "Al_2(SO_4)_3" }, | |
| { name: "Azotat de Argint", formula: "AgNO3", latex: "AgNO_3" }, | |
| { name: "Carbonat de Calciu", formula: "CaCO3", latex: "CaCO_3" } | |
| ]; | |
| let currentQuestion = {}; | |
| let score = 0; | |
| let questionCount = 1; | |
| // Inițializare | |
| function initGame() { | |
| pickQuestion(); | |
| document.getElementById("user-input").addEventListener("keypress", function(event) { | |
| if (event.key === "Enter") { | |
| // Dacă butonul check e vizibil, apasă check, altfel next | |
| if(document.getElementById("btn-check").style.display !== "none") { | |
| checkAnswer(); | |
| } else { | |
| nextQuestion(); | |
| } | |
| } | |
| }); | |
| } | |
| function pickQuestion() { | |
| // Alegem random | |
| const randomIndex = Math.floor(Math.random() * database.length); | |
| currentQuestion = database[randomIndex]; | |
| // Reset UI | |
| document.getElementById("question").innerHTML = `Scrie formula pentru: <br><strong>${currentQuestion.name}</strong>`; | |
| document.getElementById("user-input").value = ""; | |
| document.getElementById("user-input").focus(); | |
| document.getElementById("feedback").innerHTML = ""; | |
| document.getElementById("btn-check").style.display = "inline-block"; | |
| document.getElementById("btn-next").style.display = "none"; | |
| // Reset input style | |
| document.getElementById("user-input").style.borderColor = "#ddd"; | |
| document.getElementById("user-input").disabled = false; | |
| } | |
| function checkAnswer() { | |
| let userAns = document.getElementById("user-input").value.trim(); | |
| let feedback = document.getElementById("feedback"); | |
| // Simplă verificare (case sensitive pentru chimie e important, dar acceptăm fără spații) | |
| if (userAns === currentQuestion.formula) { | |
| // Corect | |
| score++; | |
| document.getElementById("score").innerText = score; | |
| feedback.innerHTML = `<span class="correct">Corect! Bravo!</span>`; | |
| document.getElementById("user-input").style.borderColor = "#28a745"; | |
| finishTurn(); | |
| } else { | |
| // Greșit | |
| feedback.innerHTML = `<span class="wrong">Greșit!</span><br> | |
| Formula corectă este: <div class="latex-display">$$${currentQuestion.latex}$$</div>`; | |
| document.getElementById("user-input").style.borderColor = "#dc3545"; | |
| // Render MathJax pentru formula corectă | |
| MathJax.typesetPromise(); | |
| finishTurn(); | |
| } | |
| } | |
| function finishTurn() { | |
| document.getElementById("user-input").disabled = true; | |
| document.getElementById("btn-check").style.display = "none"; | |
| document.getElementById("btn-next").style.display = "inline-block"; | |
| document.getElementById("btn-next").focus(); | |
| } | |
| function nextQuestion() { | |
| questionCount++; | |
| document.getElementById("q-count").innerText = questionCount; | |
| pickQuestion(); | |
| } | |
| // Start | |
| initGame(); | |
| </script> | |
| </body> | |
| </html> |