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,16 +40,16 @@ 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)
     }
 
-  
+
     function handleClick() {
         if (!question) {
             alert('문제가 입력되지 않았습니다.')
@@ -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('입력이 완료되었습니다.')
@@ -83,13 +84,13 @@ function AdminQuiz() {
                     <input type="text" className="form-control" onChange={handleChangeQuestion} placeholder="문제를 입력하세요" />
                 </div>
                 <div className="p-3 ">
-                <span className="font-weight-bold mr-2 h3">2. 보기 입력하기</span> 
+                    <span className="font-weight-bold mr-2 h3">2. 보기 입력하기</span>
                     <div className="input-group">
                         <div className="input-group-prepend">
                             <div className="input-group-text">
                                 <input type="radio" id={selectOption} name="answer" />
                             </div>
-                        </div>                                               
+                        </div>
                         <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
                     </div>
                     {list.map((element) => element)}

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">
-            <div className="input-group-prepend">
-                <div className="input-group-text">
-                    <input type="radio" id="option"  />
+        list.push(
+            <div className="input-group">
+                <div className="input-group-prepend">
+                    <div className="input-group-text">
+                        <input type="radio" name="answer" />
+                    </div>
                 </div>
+                <input type="text" class="form-control"  id={String(selectOption + 1)}  placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
             </div>
-            <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
-            </div>
-        }
-        setselectOption(list)
+        )
+        setselectOption(selectOption + 1)
     }
 
-    return (
-        <>
-            {/* {done ? alert('모두 입력되었습니다.') : ''} */}
-
-            <div className="container-fluid">
-                <div className="row d-flex justify-content-center">
-                    <div className="col-8">
+  
+    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('입력이 완료되었습니다.')
+        }
 
-                        <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="문제를 입력하세요" />
+    // function handleChangeQuestion(){}
 
-                            </div>
 
-                            <div className="p-3 ">
-                                <div className="input-group">
-                                    <div className="input-group-prepend">
-                                        <div className="input-group-text">
-                                            <input type="radio" id="option"/>
-                                        </div>
-                                    </div>
-                                    <input type="text" class="form-control" placeholder="보기를 입력하세요"  onChange={handleChangechoose} />
-                                </div>
-                                {selectOption}
-
-                                <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
-                                
-                            </div>
-
-                            <div className="p-3 ">
-                                <span className="font-weight-bold mr-2 h3">정답:</span>
-                                <input type="text" onChange={handleChangeanswer} placeholder="정답을 입력하세요" />
+    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" 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={selectOption} name="answer" />
                             </div>
-
-                            <label for="inputLogin" className="d-flex justify-content-center">
-                                <button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
-                            </label>
                         </div>
-
+                        <input type="text" className="form-control" id='1' placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
                     </div>
+                    {list.map((element) => element)}
+                    <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
+                </div>
+
+                <div className="p-3 ">
+                    <span className="font-weight-bold mr-2 h3">정답:</span>
+                    <input type="text" onChange={handleChangeanswer} placeholder="정답을 입력하세요" />
                 </div>
+
+                <label for="inputLogin" className="d-flex justify-content-center">
+                    <button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
+                </label>
             </div>
-        </>
+        </div>
     )
 }
 
-export default Admin
\ No newline at end of file
+export default AdminQuiz