AdminQuiz.js 3.74 KB
Newer Older
baesangjune's avatar
.    
baesangjune committed
1
import React, { useState } from 'react';
baesangjune's avatar
.    
baesangjune committed
2

baesangjune's avatar
.    
baesangjune committed
3
4
let list = []

baesangjune's avatar
baesangjune committed
5
6
let QnAadmins = []
let QnAadmin = {}
baesangjune's avatar
.    
baesangjune committed
7
let savechoose = {}
baesangjune's avatar
baesangjune committed
8

baesangjune's avatar
.    
baesangjune committed
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function AdminQuiz() {


    const [question, setQuestion] = useState('')
    const [choose, setChoose] = useState('')
    const [answer, setAnswer] = useState('')
    const [selectOption, setselectOption] = useState(1)

    const handleChangeQuestion = (event) => {

        QnAadmin['Q'] = event.target.value

        setQuestion(event.target.value)
    }
baesangjune's avatar
baesangjune committed
23
    const handleChangeChoose = (event) => {
baesangjune's avatar
.    
baesangjune committed
24
25
        savechoose[event.target.id] = event.target.value
  
baesangjune's avatar
.    
baesangjune committed
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

        setChoose(event.target.value)
    }
    const handleChangeanswer = (event) => {

        QnAadmin['A'] = event.target.value

        setAnswer(event.target.value)
    }



    function addSelectOption() {
        list.push(
            <div className="input-group">
                <div className="input-group-prepend">
                    <div className="input-group-text">
baesangjune's avatar
choose    
baesangjune committed
43
                        <input type="radio" name="answer" />
baesangjune's avatar
.    
baesangjune committed
44
45
                    </div>
                </div>
baesangjune's avatar
choose    
baesangjune committed
46
                <input type="text" class="form-control"  id={String(selectOption + 1)}  placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
baesangjune's avatar
.    
baesangjune committed
47
48
49
50
51
            </div>
        )
        setselectOption(selectOption + 1)
    }

baesangjune's avatar
choose    
baesangjune committed
52

baesangjune's avatar
baesangjune committed
53
    function handleClick() {
baesangjune's avatar
.    
baesangjune committed
54
55
56
57
58
59
60
61
62
63
64
        if (!question) {
            alert('문제가 입력되지 않았습니다.')
        }
        else if (!choose) {
            alert('보기가 입력되지 않았습니다.')
        }
        else if (!answer) {
            alert('정답이 입력되지 않았습니다.')
        }
        else {
            console.log(QnAadmin)
baesangjune's avatar
.    
baesangjune committed
65
            QnAadmin['Choose']=Object.values(savechoose)
baesangjune's avatar
.    
baesangjune committed
66
            QnAadmins.push(QnAadmin)
baesangjune's avatar
choose    
baesangjune committed
67
            QnAadmin = {}
baesangjune's avatar
.    
baesangjune committed
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
            localStorage.setItem('QnA', JSON.stringify(QnAadmins))
            console.log(QnAadmins)
            alert('입력이 완료되었습니다.')
        }

    }

    // function handleChangeQuestion(){}


    return (
        <div className="" id="Quiz1">
            <h2 className="p-3 border text-center">문제만들기</h2>
            <div className="p-3 borber">
                <div className="p-3 ">
baesangjune's avatar
.    
baesangjune committed
83
                    <span className="font-weight-bold mr-2 h3">1. 문제 입력하기</span>
baesangjune's avatar
.    
baesangjune committed
84
85
86
                    <input type="text" className="form-control" onChange={handleChangeQuestion} placeholder="문제를 입력하세요" />
                </div>
                <div className="p-3 ">
baesangjune's avatar
choose    
baesangjune committed
87
                    <span className="font-weight-bold mr-2 h3">2. 보기 입력하기</span>
baesangjune's avatar
.    
baesangjune committed
88
89
90
91
92
                    <div className="input-group">
                        <div className="input-group-prepend">
                            <div className="input-group-text">
                                <input type="radio" id={selectOption} name="answer" />
                            </div>
baesangjune's avatar
choose    
baesangjune committed
93
                        </div>
baesangjune's avatar
.    
baesangjune committed
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
                        <input type="text" className="form-control" 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 AdminQuiz