Commit 5c2276e7 authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

calculate

parent fc49f0e1
import React from 'react'; import React from 'react';
import logo from './logo.svg'; import logo from './logo.svg';
import './App.css'; import './App.css';
import ReactDOM from 'react-dom';
function App() { function App(props) {
return ( return (
<div className="App"> <>
<h2>어떤 페이지가 나올까요? ^ ^</h2> <div className="App">
궁금합니다^ ^ <h1 style={{ background: "orange", display: "inline-block", border: "3px solid black", width: "200px" }}> Calculus</h1>
</div> </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 App;
// export default Quiz1;
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment