Week4 QE GroupD TeamP’Getty
✨ นายเมษา มานิตสกุลวงศ์
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TEST</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@200&display=swap" rel="stylesheet"> </head> <style> body { background-image: linear-gradient(to right, #CCFFCC, #FFFF99); } :root { --font: 24px; } * { margin: 0; padding: 0; box-sizing: border-box; color: white; font-family: 'Kanit', sans-serif; } button { background-color: #FFD700; border: none; padding: 15px 25px; text-align: center; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .topic { font-size: 36px; font-weight: 600; position: absolute; top: 15%; left: 39%; } .flex { display: flex; justify-content: center; align-items: center; } p2, p1 { font-size: 40px; font-weight: 700; } .body-container { height: 100%; background: url(https://images.unsplash.com/photo-1597008641621-cefdcf718025?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=937&q=80); background-repeat: no-repeat; background-size: cover; flex-direction: column; } .container { margin-bottom: 50px; } /* ตัวอักษรโจทย์ */ .container2 { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%) } @keyframes effect{ } .txt-answer { font-size: var(--font); padding: 30px; } .txt-result { font-size: var(--font); } .hiddenans { display: none; } input[type=number] { color: black; font-size:large; border-radius: 15px; width: 500px; height: 50px; padding: 10px 20px; border: none; outline: none; } .trans { background: rgba(225, 58, 58, 0.5); /* Black background with 0.5 opacity */ margin-top: 150px; padding: 30px; border-radius: 15px; } </style> <body> <div class="container2"> <p1 id="num1"></p1> <p1 id="operator"></p1> <p1 id="num2"></p1> </div> <p class="topic flex">ตอบคำถามคณิตแสนสนุก</p> <div class="body-container flex"> <div class="trans"> <p class="txt-answer">Your Answer</p> <div class="container"> <input id="inputans" type="number"> </div> <div class="flex"> <div> <p1 id="result" class="hiddenans txt-result"></p1> <p1 id="corw" class="hiddenans txt-result"></p1> </div> <button type="button" onclick="corwro(x,y,z)">Submit</button> <button type="button" onclick="restart()" class="new-question">New Question?</button> </div> </div> </div> </body> <script> function randomnumber() { var num1 = Math.floor(Math.random() * 100) + 1; var num2 = Math.floor(Math.random() * 100) + 1; var ooo = Math.floor(Math.random() * 4) + 1; var newnum var operator = { 1: "+", 2: "-", 3: "x", 4: "/" } othatwilluseinresult = operator[ooo]; if (othatwilluseinresult == "/" ) { newnum = Math.floor(Math.random() * 20) + 1; num1 = num2*newnum; document.getElementById("operator").innerHTML = operator[ooo]; document.getElementById("num1").innerHTML = num1; document.getElementById("num2").innerHTML = num2; result(num1, num2, othatwilluseinresult); return [num1, num2, othatwilluseinresult]; } else { document.getElementById("operator").innerHTML = operator[ooo]; document.getElementById("num1").innerHTML = num1; document.getElementById("num2").innerHTML = num2; result(num1, num2, othatwilluseinresult); return [num1, num2, othatwilluseinresult]; } } var xyz = randomnumber(); var x, y, z; function result(x, y, z) { var num1 = x, num2 = y, operator = z, realresult; if (operator == "+") { document.getElementById("result").innerHTML = "The answer is " + (num1 + num2); return num1 + num2; } else if (operator == "-") { document.getElementById("result").innerHTML = "The answer is " + (num1 - num2); return num1 - num2; } else if (operator == "x") { document.getElementById("result").innerHTML = "The answer is " + (num1 * num2); return num1 * num2; } else if (operator == "/") { document.getElementById("result").innerHTML = "The answer is " + (num1 / num2); return num1 / num2; } } x = xyz[0]; y = xyz[1]; z = xyz[2]; function corwro(x,y,z) { var aaa = result(x,y,z); var ans = document.getElementById("inputans").value; if (ans == aaa) { document.getElementById("corw").innerHTML = "Your answer is Correct"; } else { document.getElementById("corw").innerHTML = "Your answer is Wrong"; } showans(); } function restart() { location.reload(true); } function showans() { document.getElementById("result").style.display = "block"; document.getElementById("corw").style.display = "block"; } </script> </html>