xxxxxxxxxx173
<html lang="en"><head> <meta charset="UTF-8"> <title>Prvky</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> <style> html { height: 0; } body { overflow: hidden; margin: 0; padding: 0; text-align: center; margin-top: 50vh; transform: translateY(-50%); } * { font-family: Arial, Helvetica, sans-serif; /* font-family: 'Pacifico', cursive; */ } #prvek, #ansprvek { font-size: 7em; } #ansprveklatin { font-size: 4.2em; } #swap { margin-left: 15px; font-size: 4.2em; cursor: pointer; user-select: none; position:fixed; } #nextbutton { font-size: 4.2em; } #ansbutton { font-size: 3em; } body > * { display: block; } #ansprvek-container > * { display: inline; } button { margin: 10px; margin-left: auto; margin-right: auto; user-select: none; } #ansbutton.active { background-color: white; } @media screen and (orientation: portrait) { body { font-size: 1.5em; } } </style> <script> window.prvky = [ ['H', 'Vodík', 'Hydrogenium'], ['Li', 'Lithium', 'Lithium'], ['Na', 'Sodík', 'Natrium'], ['K', 'Draslík', 'Kalium'], ['Mg', 'Hořčík', 'Magnesium'], ['Ca', 'Vápník', 'Calcium'], ['Ba', 'Baryum', 'Baryum'], ['V', 'Vanad', 'Vanadium'], ['Cr', 'Chrom', 'Chromium'], ['Mo', 'Molybden', 'Molybdaenum'], ['W', 'Wolfram', 'Wolframium'], ['Mn', 'Mangan', 'Manganum'], ['Fe', 'Železo', 'Ferrum'], ['Os', 'Osmium', 'Osmium'], ['Co', 'Kobalt', 'Cobaltum'], ['Ni', 'Nikl', 'Niccolum'], ['Pd', 'Palladium', 'Palladium'], ['Pt', 'Platina', 'Platinum'], ['Cu', 'Měď', 'Cuprum'], ['Ag', 'Stříbro', 'Argentum'], ['Au', 'Zlato', 'Aurum'], ['Zn', 'Zinek', 'Zincum'], ['Cd', 'Kadmium', 'Cadmium'], ['Hg', 'Rtuť', 'Hydrargyrum'], ['B', 'Bor', 'Borum'], ['Al', 'Hliník', 'Aluminium'], ['C', 'Uhlík', 'Carboneum'], ['Si', 'Křemík', 'Silicium'], ['Ge', 'Germanium', 'Germanium'], ['Sn', 'Cín', 'Stannum'], ['Pb', 'Olovo', 'Plumbum'], ['N', 'Dusík', 'Nitrogenium'], ['P', 'Fosfor', 'Phosphorus'], ['As', 'Arzen', 'Arsenicum'], ['Sb', 'Antimon', 'Stibium'], ['O', 'Kyslík', 'Oxygenium'], ['S', 'Síra', 'Sulphur'], ['Se', 'Selen', 'Selenium'], ['Te', 'Tellur', 'Tellurium'], ['F', 'Fluor', 'Fluorum'], ['Cl', 'Chlor', 'Chlorum'], ['Br', 'Brom', 'Bromum'], ['I', 'Jod', 'Iodum'], ['At', 'Astat', 'Astatium'], ['He', 'Helium', 'Helium'], ['Ne', 'Neon', 'Neon'], ['Ar', 'Argon', 'Argon'], ['Kr', 'Krypton', 'Krypton'], ['Xe', 'Xenon', 'Xenon'], ['Rn', 'Radon', 'Radon'], ['U', 'Uran', 'Uranium'] ] window.stack = new Array(5); function prvek() { return prvky[Math.floor(Math.random() * prvky.length)] } function next() { updateAns(false) addToStack(document.getElementById('prvek').textContent) for(var nextP=prvek(); stack.includes(nextP[0]); nextP = prvek()); display(nextP) } function addToStack(x) { stack.splice(0, 1); stack.push(x); } function updateAns(vis=document.getElementById('ansbutton').classList.contains('active')) { let ansButton = document.getElementById('ansbutton'); if(vis) ansButton.classList.add('active') else ansButton.classList.remove('active') document.getElementById('ans').style.visibility = vis ? 'visible' : 'hidden' } function display(arr) { document.getElementById('prvek').innerText = arr[0]; document.getElementById('ansprvek').innerText = arr[1]; document.getElementById('ansprveklatin').innerText = arr[2]; } function swapAns() { let prvek = document.getElementById('prvek') let ansprvek = document.getElementById('ansprvek') prvek.id = 'ansprvek'; ansprvek.id = 'prvek'; [prvek.textContent, ansprvek.textContent] = [ansprvek.textContent, prvek.textContent] } </script> <script> window.addEventListener('load', () => next()) </script></head><body> <span id="prvek">H</span> <button id="nextbutton" onclick="next()">Další</button> <button id="ansbutton" onclick="this.classList.toggle('active'); updateAns()">Řešení</button> <div style="visibility: hidden;" id="ans"> <div id="ansprvek-container"> <span id="ansprvek">Vodík</span><span id="swap" onclick="swapAns()"> ⇅</span> </div> <i id="ansprveklatin">Hydrogenium</i> </div></body></html>