15日目14日目-問題の正解率を表示

0.quizページのhtmlファイルのjavascriptコードが長すぎてstatic/jsフォルダの個別ファイルに分離します。

OXテストの問題正解率をリアルタイムで計算して表示するコード

昨夜、どの問題にも問題がある正解率はどうでしたか.考えました.現在の「分類」(答えを明らかにする質問がある)に代わって、質問ごとの人に正解率を出してもらう意見がいいので、このように変えました.次に、実装プロセスとコードを示します.

//javascript 입니다.

/**
 * @brief 정답을 골랐을 때 맞았는지 틀렸는지와 설명을 띄우고, 점수 합산을 위해 이 정보를 저장합니다.
 * @param {string} selectedAnswer O를 골랐는지 X를 골랐는지에 대한 값
 * @returns {}
 * @author 김진회
 * @date 21.08.24
 */
function selectAnswer(selectedAnswer) {
    //답을 골랐을 때 마지막 문제라면 버튼이름을 '다음 문제로'에서 결과보러가기로 변경하기
    let thisQuizNo = seq - 1;
    if (thisQuizNo > 9) {
        $('#btn-next').html("결과보러가기!");
    }

    //고른 답이 정답일 때(if)와 오답일 때(else)
    if (selectedAnswer === correctAnswer) {        
        //이 문제의 정답을 맞췄다고 서버에 전송
        $.ajax({
            dataType: "json",
            type: "POST",
            url: "/saveone",
            data: {
                "quizno": thisQuizNo,
                "device": device,
                "correctOrNot": 1
            },
            success: function (response) {
            }
        })
        countCorrect++;
        // 모달창에 정답입니다! 문구와 정답 설명을 넣어 모달창 띄우기
        temp_check = `정답입니다! <br/><br>`;
        $('#description').html(temp_check);
        modalOn()
    } else {
        //이 문제의 정답을 틀렸다고 서버에 전송
        $.ajax({
            dataType: "json",
            type: "POST",
            url: "/saveone",
            data: {
                "quizno": thisQuizNo,
                "device": device,
                "correctOrNot": 0
            },
            success: function (response) {
            }
        })
        // 모달창에 아쉽네요! 문구와 함께 답 설명을 넣어 모달창 띄우기
        temp_check = `아쉽지만 오답이에요! <br/><br>`;
        $('#description').html(temp_check);
        modalOn()
    }
}

以上のように,問題の正解を選択したときに正解なのか誤りなのか,説明のために作成したselectAnswer関数内で正解なのか誤りなのかを選択し,コードを追加し,異なる値をajaxを介してサーバ側に送信する.

# python입니다.

from flask import Flask, render_template, jsonify, request, flash, session, redirect
from pymongo import MongoClient
import datetime

app = Flask(__name__)
conn = MongoClient()
db = conn.good42

# 문제별 정답률: 퀴즈 하나를 풀 때마다 그 시도에서 해당 문제의 정답을 맞혔는지 여부를 DB에 저장하기
# author 김진회
# date 21.08.29
@app.route('/saveone', methods=['POST'])
def saveone():
    quizno = request.form['quizno']
    device = request.form['device']
    correct = request.form['correctOrNot']
    now = datetime.datetime.now()
    doc = {
        "quizno": quizno,
        "device": device,
        "correct": correct,
        "time": now,
    }
    db.quizanswers.insert_one(doc)
    return jsonify({'msg': '등록 완료!'})

サーバ側は、ajaxで送信された値を受信し、現在のビジュアル情報とともにmongodbに保存します.
そして,解答を設定する際に,このように格納された情報を伝達し,サーバ側に正解率を計算させる.このように算出された対応する質問の正解率は,質問,正解,解説情報とともに回答に送られる.

# python입니다.

## 퀴즈페이지 HTML 화면 보여주기
## GET으로 들어오면 단순히 화면을 보여주고, POST로 들어오면 DB에서 다음 문제 정보를 전달하는 api
@app.route('/quiz', methods=['GET', 'POST'])
def quiz():
    if request.method == 'GET':
        return render_template('quiz.html')
    elif request.method == 'POST':
        seq = request.form['seq']
        quiz = db.quiz.find_one({'no': seq}, {'_id': False})
        #현재 문제의 정답률 계산하기
        answers = db.quizanswers.find({'quizno':seq}).count()
        corrects = db.quizanswers.find({'quizno':seq, 'correct':'1'}).count()
        rate = round(corrects / answers * 100, 2)
        return jsonify({'msg': '성공', 'quiz': quiz, 'rate': rate})

//javascript입니다.

/**
 * @brief 현재 순서에 맞게 퀴즈를 세팅합니다.(ajax)
 * @param {int} no 이번에 세팅해야할 퀴즈 번호
 * @returns {}
 * @author 김진회
 * @date 21.08.23
 */
function setQuiz(no = 1) {
    $.ajax({
        dataType: "json",
        type: "POST",
        url: "/quiz",
        data: {
            "seq": no,
        },
        success: function (response) {
            quiz = response.quiz['content']
            correctAnswer = response.quiz['answer']
            description = response.quiz['description']
            quizno = response.quiz['no']
            correctRate = response.rate
            temp_quiz = `${quiz}`
            temp_rate = `정답률: ${correctRate}%`
            $('#quiz').html(temp_quiz);
            $('#correct-rate').html(temp_rate);
            numberOfQuiz(quizno);
        }
    })
    //현재 풀고 있는 문제 번호를 +1해서 저장
    seq++;
}

サーバ側はajaxで以下の問題情報を要求し,受信したsetQuiz関数に正解率補正Rateを符号化し,適切な場所でhtmlを作成して入れる.