choose

src/AdminQuiz.js

@@ -4,7 +4,7 @@ let list = []
 
 let QnAadmins = []
 let QnAadmin = {}
-
+let c = {}
 
 function AdminQuiz() {
 
@@ -21,8 +21,8 @@ function AdminQuiz() {
         setQuestion(event.target.value)
     }
     const handleChangeChoose = (event) => {
-
-        QnAadmin['Choose'] = event.target.value
+        c[event.target.id] = event.target.value
+        // QnAadmin['Choose'] = event.target.value
 
         setChoose(event.target.value)
     }
@@ -40,10 +40,10 @@ function AdminQuiz() {
             <div className="input-group">
                 <div className="input-group-prepend">
                     <div className="input-group-text">
-                        <input type="radio" id={selectOption + 1} name="answer" />
+                        <input type="radio" name="answer" />
                     </div>
                 </div>
-                <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
+                <input type="text" class="form-control"  id={String(selectOption + 1)}  placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
             </div>
         )
         setselectOption(selectOption + 1)
@@ -62,8 +62,9 @@ function AdminQuiz() {
         }
         else {
             console.log(QnAadmin)
+            QnAadmin['Choose']=Object.values(c)
             QnAadmins.push(QnAadmin)
-            QnAadmin ={}
+            QnAadmin = {}
             localStorage.setItem('QnA', JSON.stringify(QnAadmins))
             console.log(QnAadmins)
             alert('입력이 완료되었습니다.')

src/compare.js

 import React, { useState } from 'react';
-// import { Link } from 'react-router-dom';
 
-function Admin() {
+let list = []
+
+let QnAadmins = []
+let QnAadmin = {}
+
+let c = {}
+
+
+function AdminQuiz() {
+
 
     const [question, setQuestion] = useState('')
     const [choose, setChoose] = useState('')
     const [answer, setAnswer] = useState('')
-    const [selectOption, setselectOption ] = useState('')
-    // const [done, setDone] = useState(false)
+    const [selectOption, setselectOption] = useState(1)
 
     const handleChangeQuestion = (event) => {
+
+        QnAadmin['Q'] = event.target.value
+
         setQuestion(event.target.value)
     }
-    const handleChangechoose = (event) => {
+    const handleChangeChoose = (event) => {
+        c[event.target.id] = event.target.value
+
+        // QnAadmin['Choose'] = event.target.value
+
         setChoose(event.target.value)
     }
     const handleChangeanswer = (event) => {
+
+        QnAadmin['A'] = event.target.value
+
         setAnswer(event.target.value)
     }
 
-    function handleClick() {
 
-        // localStorage.setItem('N', number)
-        localStorage.setItem('Q', question)
-        localStorage.setItem('Choose', choose)
-        localStorage.setItem('Answer', answer)
-        // setDone(true)
-        alert('입력이 완료되었습니다')
-    }
 
     function addSelectOption() {
-        let list = function(){
-            return <div className="input-group">
+        list.push(
+            <div className="input-group">
                 <div className="input-group-prepend">
                     <div className="input-group-text">
-                    <input type="radio" id="option"  />
+                        <input type="radio" name="answer" />
                     </div>
                 </div>
-            <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
+                <input type="text" class="form-control"  id={String(selectOption + 1)}  placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
             </div>
+        )
+        setselectOption(selectOption + 1)
     }
-        setselectOption(list)
+
+  
+    function handleClick() {
+        if (!question) {
+            alert('문제가 입력되지 않았습니다.')
+        }
+        else if (!choose) {
+            alert('보기가 입력되지 않았습니다.')
+        }
+        else if (!answer) {
+            alert('정답이 입력되지 않았습니다.')
+        }
+        else {
+            console.log(QnAadmin)
+            QnAadmin['Choose']=Object.values(c)                                                                                                                                                                                                           
+
+            QnAadmins.push(QnAadmin)
+            localStorage.setItem('QnA', JSON.stringify(QnAadmins))
+            console.log(QnAadmins)
+            alert('입력이 완료되었습니다.')
         }
 
-    return (
-        <>
-            {/* {done ? alert('모두 입력되었습니다.') : ''} */}
+    }
 
-            <div className="container-fluid">
-                <div className="row d-flex justify-content-center">
-                    <div className="col-8">
+    // function handleChangeQuestion(){}
 
-                        <h2 className="p-3 border text-center">문제만들기</h2>
 
+    return (
+        <div className="" id="Quiz1">
+            <h2 className="p-3 border text-center">문제만들기</h2>
             <div className="p-3 borber">
                 <div className="p-3 ">
                     <span className="font-weight-bold mr-2 h3">1.</span>
-                                {/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */}
-                                <input type="text" onChange={handleChangeQuestion} placeholder="문제를 입력하세요" />
-
+                    <input type="text" className="form-control" onChange={handleChangeQuestion} placeholder="문제를 입력하세요" />
                 </div>
-
                 <div className="p-3 ">
                     <div className="input-group">
                         <div className="input-group-prepend">
                             <div className="input-group-text">
-                                            <input type="radio" id="option"/>
+                                <input type="radio" id={selectOption} name="answer" />
                             </div>
                         </div>
-                                    <input type="text" class="form-control" placeholder="보기를 입력하세요"  onChange={handleChangechoose} />
+                        <input type="text" className="form-control" id='1' placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
                     </div>
-                                {selectOption}
-
+                    {list.map((element) => element)}
                     <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
-                                
                 </div>
 
                 <div className="p-3 ">
@@ -85,12 +108,8 @@ function Admin() {
                     <button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
                 </label>
             </div>
-
-                    </div>
-                </div>
         </div>
-        </>
     )
 }
 
-export default Admin
\ No newline at end of file
+export default AdminQuiz