quiz

src/Quiz.js

@@ -15,16 +15,15 @@ function Quiz() {
         i: 0,
         page: 0,
     })
-    let [selected,setSelected] = useState("")  //선택한 답을 보여줄 것들
+    let [selected, setSelected] = useState("")  //선택한 답을 보여줄 것들
 
     function setQuestion() {
         setQuestionss({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 })
     }
-
     let handleChange = (ev) => {
         ev.preventDefault()  //새로고침 안되도록
         setSelected(ev.target.value)  //selected값 변경
-        let slt=ev.target.value  //slt에 선택한값 받아옴
+        let slt = ev.target.value  //slt에 선택한값 받아옴
 
         let count = question.Choose.length  //이거 정확히 뭘로할지 모르겠어요 ㅜㅜ
 
@@ -37,7 +36,7 @@ function Quiz() {
             if (ev.target.checked) {  //이거 맞는지도 잘..
                 // checked_index = i;
                 checked_value = slt;
-                localStorage.setItem(question.i+1 + '번문제 답', checked_value)
+                localStorage.setItem(question.i + 1 + '번문제 답', checked_value)
             }
         }
     }
@@ -46,7 +45,7 @@ function Quiz() {
             <h2>Q:{question.Q}</h2>
             <div>
                 <form onSubmit={handleChange}>
-                    {question.Choose.map( (a,index) =>
+                    {question.Choose.map((a, index) =>
                         <div key={index}>
                             <input type="radio" name='answer' id={'anwer' + a} value={a} onClick={handleChange} />
                             <label htmlFor={a}> {a}</label>
@@ -54,7 +53,8 @@ function Quiz() {
                     )}
                     <input hidden type="submit" value="확인" />    {/*버튼 숨김*/}
                 </form>
-                <h3>선택한 답 : {selected}</h3>  {/* 선택한 값 보여줌 */}
+                <p>선택한 답 :<span style={{color : "green", fontWeight : "bold", fontSize: "30px"}}> {selected}</span>  {/* 선택한 값 보여줌 */}
+                </p>
             </div>
 
 
@@ -88,8 +88,7 @@ function Quiz() {
                         <Timer.Seconds /> seconds
                         </>
                 )}
-            </Timer>
-            {/* npm i react-compound-timer */}
+            </Timer>     {/* npm i react-compound-timer */}
 
         </div>
     )