calculate

src/App.js

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