App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import ReactDOM from 'react-dom';

function App(props) {
  return (
    <>
      <div className="App">
        <h1 style={{ background: "orange", display: "inline-block", border: "3px solid black", width: "200px" }}> Calculus</h1>
      </div>
      <div className="App">
        이름을 입력하세요
        <input onChange={(event) => { console.log(event.target.value) }} />
      </div>
      <button onClick={ShowQuiz1} style={{ margin: "30px", marginLeft: "690px", width: "150px", height: "30px", fontFamily : "impact"}}>Quiz Start ! </button>
    </>
  );
}
function Next() {
  return alert("다음문제")
  //선택한 정답과 실제정답이 일치하는지 판별
}

function Quiz1() {
  return (
    <>
      <h2>Q1. 3 + 3 = ?</h2>
      <div>① 2</div>
      <div>② 4</div>
      <div>③ 6</div>
      <div>④ 8</div>
      <div className="App" style={{ float: "left" }}>
        정답을 입력하세요
        <select id="number1">
          <option value="0" hidden disabled selected>정답선택</option>
          <option value="1">①</option>
          <option value="2">②</option>
          <option value="3">③</option>
          <option value="4">④</option>
        </select>
        <button onClick={ShowQuiz2} style={{ marginLeft: "10px" }}>다음</button>
      </div>
    </>
  );
}
function ShowQuiz1() {
  ReactDOM.render(
    <React.StrictMode>
      <Quiz1 />
    </React.StrictMode>,
    document.getElementById('root')
  );
}

function Quiz2() {
  return (
    <>
      <h2>Q2. 6 x 4 = ?</h2>
      <div>① 6</div>
      <div>② 12</div>
      <div>③ 18</div>
      <div>④ 24</div>
      <div className="App" style={{ float: "left" }}>
        정답을 입력하세요
        <select>
          <option hidden disabled selected>정답선택</option>
          <option value="6">①</option>
          <option value="12">②</option>
          <option value="18">③</option>
          <option value="24">④</option>
        </select>
        <button onClick={Showlast} style={{ marginLeft: "10px" }}>다음</button>
      </div>
    </>
  );
}
function ShowQuiz2() {
  ReactDOM.render(
    <React.StrictMode>
      <Quiz2 />
    </React.StrictMode>,
    document.getElementById('root')
  );
}

function Last() {
  return (
    <>
      <div className="App" style={{ margin: "30px", fontSize: "2.0em" }}>Quiz 완료</div>
      <h1 style={{ marginLeft: "640px" }}>수고하셨습니다 !!</h1>
    </>
  )
}
function Showlast() {
  ReactDOM.render(
    <React.StrictMode>
      <Last />
    </React.StrictMode>,
    document.getElementById('root')
  );
}


export default App;
// export default Quiz1;