Week4 QE GroupD TeamP’Getty

✨ นายเมษา มานิตสกุลวงศ์

<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;

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>