test.html 문제 풀이 구현, Level 증가 구현

 

백엔드 

 

app.py

 

 

from flask import Flask, render_template, url_for, jsonify, request

from pymongo import MongoClient

app = Flask(__name__)

client = MongoClient('mongodb+srv://@cluster0..mongodb.net/?retryWrites=true&w=majority')

db = client.dbsparta

@app.route('/')

def home():

    return render_template('index.html')

@app.route('/test')

def test():

    return render_template('test.html')

@app.route('/quiz', methods=["GET"])

def quiz():

    quiz = list(db.QUIZ.find({}, {'_id': False}))

    return jsonify({'result': quiz})

@app.route('/result', methods=["GET"])

def result():

    result = list(db.RESULT.find({}, {'_id': False}))

    return jsonify({'result': result})

@app.route('/final')

def final():

    arg = request.args.get('total_score')

    return render_template('final.html', total_score=arg)

# total_score=num

@app.route('/final/score', methods=["POST"])

def final_score():

    results = request.form["score_give"]

    num = results

    # db에 점수를 가지고 조회해서 알맞는 결과 문장 가져오는 코드 작성

    return jsonify({'result': num})

if __name__ == '__main__':

    app.run('0.0.0.0', port=5000, debug=True)

mongodb, flask, dnspython 사용

 

 

 

 

 

test.html ( html, js ) 

        function show_quiz() {

            fetch(`/quiz`).then((res) => res.json()).then((data) => {

                let rows = data['result'][quiz_num - 1]

                let NUM = rows['NUM']

                let A_C = rows['A_C']

                let B_C = rows['B_C']

                let C_C = rows['C_C']

                let D_C = rows['D_C']

                let A_S = rows['A_S']

                let B_S = rows['B_S']

                let C_S = rows['C_S']

                let D_S = rows['D_S']

                console.log(rows);

                $('#lv').empty()

                let lv_html = `<span id="lv">0${NUM}</span>`

                $('#lv').append(lv_html)

                $('#box').empty()

                let color_html = `<div class="quiz-box" id="box">

                                        <button class="quiz-button" style="background-color:${A_C}" onclick="next_quiz(${A_S})"></button>

                                        <button class="quiz-button" style="background-color:${B_C}" onclick="next_quiz(${B_S})"></button>

                                        <button class="quiz-button" style="background-color:${C_C}" onclick="next_quiz(${C_S})"></button>

                                        <button class="correct-button" style="background-color:${D_C}" onclick="next_quiz(${D_S})"></button>

                                    </div>`

                $('#box').append(color_html)

            })

        }

        function next_quiz(a) {

            let score = a

            if (score == 1) {

                total_score++;

                quiz_num++;

            } else {

                quiz_num++;

            }

            if (quiz_num === 11){

                let formData = new FormData();

                formData.append("score_give", total_score);

                fetch('/final/score', {method: "POST",body: formData,}).then((res) => res.json()).then((data) => {

                    let total_score = data['result']

                    window.location.href = '/final?total_score=' + total_score

                });

            }

           

                console.log(total_score, quiz_num)

                fetch(`/quiz`).then((res) => res.json()).then((data) => {

                    let rows = data['result'][quiz_num - 1]

                    let NUM = rows['NUM']

                    let A_C = rows['A_C']

                    let B_C = rows['B_C']

                    let C_C = rows['C_C']

                    let D_C = rows['D_C']

                    let A_S = rows['A_S']

                    let B_S = rows['B_S']

                    let C_S = rows['C_S']

                    let D_S = rows['D_S']

                    $('#lv').empty()

                    let lv_html = `<span id="lv">0${NUM}</span>`

                    $('#lv').append(lv_html)

                    $('#box').empty()

                    let color_html = `<div class="quiz-box" id="box">

                                        <button class="quiz-button" style="background-color:${A_C}" onclick="next_quiz(${A_S})"></button>

                                        <button class="quiz-button" style="background-color:${B_C}" onclick="next_quiz(${B_S})"></button>

                                        <button class="quiz-button" style="background-color:${C_C}" onclick="next_quiz(${C_S})"></button>

                                        <button class="correct-button" style="background-color:${D_C}" onclick="next_quiz(${D_S})"></button>

                                    </div>`

                    $('#box').append(color_html)

                   

                })

           

        }

    </script>

</head>

<body class="body-color">

<header>

    <div class="topinfo">

        <div class="level">

            Level<span id="lv">01</span>

        </div>

        <div id="times"></div>

    </div>

</header>

<section>

    <div class="wrap">

        <div class="quiz-box" id="box">

            <div class="quiz-box">

                <button class="quiz-button" onclick="next_quiz(A_S)" style="background-color:#282828"></button>

                <button class="quiz-button" onclick="next_quiz(B_S)" style="background-color:#3c3c3c"></button>

                <button class="quiz-button" onclick="next_quiz(C_S)" style="background-color:#282828"></button>

                <button class="correct-button" onclick="next_quiz(D_S)" style="background-color:#282828"></button>

            </div>

        </div>

    </div>

</section>