Skip to content

GitLab

Commit 47820769 authored by 김민수's avatar 김민수
Browse files

수정2

parent 88f44dfc
Show whitespace changes
Inline Side-by-side
src/App.js
View file @ 47820769
......@@ -11,7 +11,7 @@ function App() {
<Router>
<header>
<Link to="/">
<button>Home</button>
<button>Calculus</button>
</Link>
</header>
<hr/>
......
src/End.js
View file @ 47820769
......@@ -2,7 +2,7 @@ import React from 'react'
// import tr from './End-Image01.jpg';
// import './End.css'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css';
// import { Link } from 'react-router-dom';
function End() {
......@@ -29,7 +29,7 @@ function End() {
<>
<div className="container">
<h2>채점표</h2>
<h2 style={{ fontSize: '40px', textAlign: 'center'}}>채점표</h2>
<table className="table table-bordered" >
<thead>
<tr>
......
src/Home.js
View file @ 47820769
// import bg from './img_study.jpg'
// import korea from './img_korea.jpg'
import React, { useState } from 'react'
import { Redirect } from 'react-router-dom';
import './Home.css'
function Home() {
const [name, setName] = useState('')
const [password, SetPassword] = useState('')
const [done, setDone] = useState(false)
const handleChange = (event) => {
const handleChangename = (event) => {
setName(event.target.value)
}
const handleChangepassword = (event) => {
SetPassword(event.target.value)
}
function checking(event) {
function checking() {
if (!name) {
alert('이름을 입력하세요')
}
else if (!password) {
alert('비밀번호를 입력하세요')
}
else if (password !== '0319') {
alert('유효한 비밀번호를 입력하세요')
}
else {
alert('입력하신 이름은' + name + '입니다.')
alert('입력하신 이름은 ' + name + '입니다.')
localStorage.setItem('name', name)
localStorage.setItem('password', password)
setDone(true)
}
}
return (
<>
{done ? <Redirect to='/quiz' /> : ''}
<div className="Main">
{/* <div className="Main"></div> */}
{/* <div style={{ backgroundImage: 'url(' + bg + ')', backgroundColor: "grey", backgroundSize: "100%", width: "100%", height: "880px", backgroundRepeat: 'no-repeat' }}>
<div className="Main"></div> */}
<div style={{ fontSize: '70px', marginBottom: '100px', textAlign: 'center', backgroundColor: '#AE0E36' }}>
{/* <img alt='korea' src={korea} width='10%'/> */}
KOREA UNIVERSITY
</div>
<div className="Box">
<div className="Name">
이름을 입력하세요
<input className="inputBox" onChange={handleChange} />
<div className='Box2'>
<button className="QuizStart" onClick={checking}>Quiz Start !</button>
{/* <div className="Box" style={{ border: 'solid', position: 'absolute', top: "300px", left: "68%"}} > */}
<div className="Name" style={{boxShadow: '5px 5px 5px 5px gray', border: 'solid', fontSize: '30px', position: "absolute", top: "300px", left: "68%" }}>
이름(Name)
<input style={{ padding: '5px', border: 'solid', borderRight: 'none', borderBottom: 'none', borderTop: 'none', marginLeft: '105px', inlineSize: '160px', blockSize: '40px', fontSize: '40px' }} onChange={handleChangename} />
</div>
<div className="Name" style={{ boxShadow: '5px 5px 5px 5px gray',border: 'solid', fontSize: '30px', position: "absolute", top: "360px", left: "68%" }}>
비밀번호(Password)
<input type='password' style={{ padding: '5px', border: 'solid', borderRight: 'none', borderBottom: 'none', borderTop: 'none', marginLeft: '0px', inlineSize: '160px', blockSize: '40px', fontSize: '40px' }} onChange={handleChangepassword} />
</div>
{/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */}
<div className='Box2'>
<button style={{boxShadow: '5px 5px 5px 5px gray', marginLeft: '82%', marginTop: '10%', blockSize: '50px', inlineSize: '175px', fontSize: '35px' }} className="QuizStart" onClick={checking}>Start !</button>
</div>
<div>계산수학</div>
{/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */}
{/* </div> */}
</div>
{/* </div> */}
</>
)
......
src/Quiz.css
View file @ 47820769
......@@ -19,33 +19,6 @@
}
.Quiz-Main {
font-size: '80px';
margin-bottom: '100px';
text-align: "center";
background-color: 'yellow';
}
.Quiz-figth {
position: "absolute";
left: "1050px";
top: '200px';
}
.Quiz-logo {
margin-left: "450px";
}
.Quiz-answer {
font-size: "75px";
margin-left: "30px";
}
.answer {
margin-left: "475px";
width: "25px";
height: "25px";
}
/* .Name {} */
.Box {
......
src/Quiz.js
View file @ 47820769
......@@ -10,7 +10,9 @@ const QnA = [
{ Q: "3 - 1 = ?", Choose: [1, 2, 3, 4], A: "2", N: 3 }
]
let Answers = []
let Solutions = [4, 3, 2]
localStorage.setItem('Solutions', JSON.stringify(Solutions))
function Quiz() {
let [question, setQuestion] = useState({
......@@ -28,31 +30,30 @@ function Quiz() {
ev.preventDefault() //새로고침 안되도록
setSelected(ev.target.value) //selected값 변경
let checked_number = ev.target.id;
localStorage.setItem('답'+(question.N), Number(checked_number)+1)
localStorage.setItem('정답' + (question.N), QnA[question.N-1].A)
Answers[question.N - 1] = Number(ev.target.id) + 1
localStorage.setItem('Answers', JSON.stringify(Answers))
}
return (
<>
<div className="Quiz-Main">미적분학 퀴즈</div>
<img src={fight} className="Quiz-fitgh" alt="lion" />
<div style={{ fontSize: '80px', marginBottom: '100px', textAlign: "center", backgroundColor: 'red' }}>미적분학 퀴즈</div>
<img src={fight} style={{ position: "absolute", left: "1050px", top: '200px' }} alt="lion" />
<div className="Quiz" >
<h1><img src={logo} className="Quiz-logo" width='75' height='75' alt='question' /> <span className="Quiz-answer">{question.Q}</span></h1>
<h1><img src={logo} style={{ marginLeft: "450px" }} width='75' height='75' alt='question' /> <span style={{ fontSize: "75px", marginLeft: "30px" }}>{question.Q}</span></h1>
{/* <div style={{ marginTop: "30px", marginBottom: "30px", marginLeft:'450px', fontSize:'40px' }}>정답을 선택하세요</div> */}
<div>
<form>
{question.Choose.map((a, index) =>
<div key={index}>
<input type="radio" className='answer' id={index} value={a} onClick={handleChange}/>
<input type="radio" name='answer' id={index} value={a} onClick={handleChange} style={{ marginLeft: "475px", width: "25px", height: "25px" }} />
<label htmlFor={a} style={{ fontSize: "40px", marginLeft: "22px" }}>{a}</label>
</div>
)}
<input hidden type="submit" value="확인" /> {/*버튼 숨김*/}
</form>
<p style={{ fontSize: "40px", marginLeft: "480px" }}>Answer :<span style={{ color: "green", fontWeight: "bold", fontSize: "90px", marginLeft: "30px" }}> {selected}</span> {/* 선택한 값 보여줌 */}<span style={{ marginLeft: "50px" }}> {(question.page === QnA.length - 1)
<p style={{ fontSize: "40px", marginLeft: "480px" }}>Answer :<span style={{ color: "green", fontWeight: "bold", fontSize: "90px", marginLeft: "30px" }}> {selected}</span> {/* 선택한 값 보여줌 */}<span style={{ marginLeft: "50px" }}>
{(question.page === QnA.length - 1)
? <Link to="/end">제출</Link>
: <button type="button" onClick={handleQuestion} style={{ width: "85px", height: "40px" }} >다음</button>
......
src/index.js
View file @ 47820769
......@@ -4,7 +4,6 @@ import './index.css';
import App from './App';
// import Quiz from './Quiz';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(
<React.StrictMode>
......
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