백엔드
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>
'15일 메이킹 챌린지 [팀 프로젝트]' 카테고리의 다른 글
| test.html 총 스코어 final.html 결과 값 띄우기, final.html 페이지 결과 값 별 이미지 적용, 팀원이랑 페어링 후 배포 (0) | 2023.02.14 |
|---|---|
| 카카오톡, 페이스북, band, 트위터 share 구현 (0) | 2023.02.10 |
| test.html 카운트다운 설정 (0) | 2023.02.09 |
| Main Page, Test Page, Final Page( index.html, style.css ), 서버( app.py ) 기본 레이아웃 구현 (0) | 2023.02.09 |
| 페이지별 상세(html, css) Figma (0) | 2023.02.07 |
