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

let answer=[]
function App(props) {
  let correctAnswer = {"1번": 3, "2번": 4}

  return (
    <>
      <div className="App">
        <h1 style={{ background: "orange", display: "inline-block", border: "3px solid black", width: "200px" }}> Online-Quiz</h1>
      </div>
      <div className="App">
        이름을 입력하세요
        <input onChange={(event) => { console.log(event.target.value) }} />
      </div>
      <button onClick={ShowQuiz1} style={{ margin: "30px", marginLeft: "355px", 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>
        <meta http-equiv="Refresh" content="3; url=here"/>
      </div>
    </>
  );
}
function ShowQuiz1() {
  ReactDOM.render(
    <React.StrictMode>
      <Quiz1 />
    </React.StrictMode>,
    document.getElementById('root')
  );
}
// function SelectAnswer(e){
//   let a = document.getElementById("number1").value
//   answer.push(a)
// }

function Quiz2() {
  return (
    <>
      <h2>Q1. 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>
 
        <meta http-equiv="Location" content="here" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        {localStorage.setItem('Answer1', 'select id')
        , localStorage.getItem('Answer1'), localStorage.removeItem, localStorage.clear}

      </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: "298px" }}>수고하셨습니다 !!</h1>
    </>
  )
}
function Showlast() {
  ReactDOM.render(
    <React.StrictMode>
      <Last />
    </React.StrictMode>,
    document.getElementById('root')
  );
}


export default App;
// export default Quiz1;