test.html 총 스코어 final.html 결과 값 띄우기, final.html 페이지 결과 값 별 이미지 적용, 팀원이랑 페어링 후 배포

2023. 2. 14. 14:43

app.py

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

from pymongo import MongoClient

app = Flask(__name__)

client = MongoClient('mongodb+srv://sparta:test@cluster0.rqyqkq1.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)

test.html

<!DOCTYPE html>

<head>

let total_score = 0

let quiz_num = 1

$(document).ready(function () {

show_quiz();

});

let SetTime = 20; // 최초 설정 시간(기본 : 초)

function msg_time() { // 1초씩 카운트

m = Math.floor(SetTime / 60) + (SetTime % 60) + "초"; // 남은 시간 계산

let msg = "<font>" + m + "</font>";

document.all.times.innerHTML = msg; // div 영역에 보여줌

SetTime--; // 1초씩 감소

if (SetTime < 0) { // 시간이 종료 되었으면..

clearInterval(tid); // 타이머 해제

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

}

window.onload = function TimerStart() {

tid = setInterval('msg_time()', 1000)

};

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">

</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">

</div>`

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

})

}

</script>

</head>

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

</div>

</div>

</header>

</div>

</section>

</div>

</body>

</html>

final.html

<!DOCTYPE html>

<head>

let locationURL = window.location.href

locationURL = locationURL.split('=')[1]

let score = 0

$(document).ready(function () {

result_get()

});

function result_get() {

if (locationURL < 3) {

score = 1

} else if (locationURL < 5) {

score = 2

} else if (locationURL < 7) {

score = 3

} else if (locationURL < 9) {

score = 4

} else {

score = 5

}

console.log(score)

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

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

let comment = rows['COMMENT']

let image = rows['image']

$('#image').empty()

$('#comment').empty()

let image_html = `<div id="image">

</div>`

$('#image').append(image_html)

let comment_html = `<p class="comment" id="comment">${comment}</p>`

$('#comment').append(comment_html)

})

}

function twitter() {

let sendText = "색감 테스트 나의 점수는??"; // 전달할 텍스트

let sendUrl = window.location.href; // 전달할 URL (도메인 서버 오픈 후 url 입력)

window.open("https://twitter.com/intent/tweet?text=" + sendText + "&url=" + sendUrl);

}

function facbook() {

let sendUrl = "http://cojun.shop/"; // 전달할 URL (도메인 서버 오픈 후 url 입력)

window.open("http://www.facebook.com/sharer/sharer.php?u=" + sendUrl);

}

function band() {

let sendUrl = window.location.href; // 전달할 URL (도메인 서버 오픈 후 url 입력)

window.open("http://band.us/plugin/share?body" + sendUrl);

}

</script>

// SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정

Kakao.init('a80a498adf2f919c5b8a90f0e35b0a3f');

// SDK 초기화 여부를 판단

console.log(Kakao.isInitialized());

function kakao() {

Kakao.Link.sendDefault({

objectType: 'feed',

content: {

title: '색감 테스트!!',

description: '색감 테스트로 색 구별 능력을 테스트 해보세요!',

imageUrl: 'https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbSGUNO%2FbtrYRlERmQQ%2F3TiS5OGAbJKUhF5ayquAFk%2Fimg.png',

link: {

mobileWebUrl: 'http://cojun.shop/', //나중에 도메인 생성 후 입력 (카카오 디벨로퍼에도 도메인 추가)

webUrl: 'http://cojun.shop/', //나중에 도메인 생성 후 입력 (카카오 디벨로퍼에도 도메인 추가)

buttons: [

{

title: '웹으로 보기',

link: {

mobileWebUrl: 'http://cojun.shop/',//나중에 도메인 생성 후 입력 (카카오 디벨로퍼에도 도메인 추가)

webUrl: 'http://cojun.shop/',//나중에 도메인 생성 후 입력 (카카오 디벨로퍼에도 도메인 추가)

// 카카오톡 미설치 시 카카오톡 설치 경로이동

installTalk: true,

})

}

</script>

</head>

<p>색감테스트 당신의 점수는?</p>

<strong class="level" id="lv">{{total_score}}</strong>

</div>

</div>

<br>

<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FQ4Gzb%2FbtrYeYjPS6B%2FlGquuGoxNwv1S4C82zibHK%2Fimg.png"

width="30">

</a>

<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJVHZW%2FbtrYj0HtVtC%2FxNPgknrK7nchqaYPZidchk%2Fimg.png"

width="30">

</a>

<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyVSBY%2FbtrYkK5qQrs%2FIFGKwtFTPsieq0x6i4O7MK%2Fimg.jpg"

width="30">

</a>

<img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbf0BT4%2FbtrYjydq22Q%2FqJ9vq2e9CTSzDwTgMkvCi0%2Fimg.png"

width="30">

</a>

</div>

</section>

</div>

</body>

</html>

결과 값에 따라 이미지, 스코어, 코멘트 변경 설정

배포 완료

느낀점 :

기능들을 구현해 보면서 배웠던걸 복습하면서 새로운 기능 추가해 보고 팀원들이랑 소통하고 회의도 하면서 많은 걸 느꼈던 2주였던 거 같다. 하지만 아쉬운 점은 많은 인원들이 중도 포기를 하면서 총 30명으로 시작해서 5개 팀으로 나눠서 진행했던 팀 프로젝트는 현재 거의 모든 팀들이 2~3명에서 진행을 해서 결과물을 만들어 내야 되었고 그러다 보니 프런트엔드를 맡기로 한 인원과 백엔드를 맡기로 한 인원 구분 없이 협업을 경험했어야 됐다. 또 한 github으로 코드 공유하면서 협업을 진행해 보고 싶었지만 여기서는 노선으로 진행을 하게 돼서 살짝 아쉬웠던 거 같다.

이 프로젝트도 끝났으니 이제 리엑트를 공부하면서 혼자 한번 게시판이나 회원가입페이지를 만들어 봐야겠다.

저작자표시

'15일 메이킹 챌린지 [팀 프로젝트]' 카테고리의 다른 글

test.html 문제 풀이 구현, Level 증가 구현 (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

CO_JUN 개발일지