d

src/App.js

 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import ReactDOM from 'react-dom';
 
-function App() {
+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 (
-    <div className="App">
-      <h2>어떤 페이지가 나올까요? ^ ^</h2>
-      궁금합니다^ ^
-    </div>
+    <>
+      <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;
\ No newline at end of file