구글 스팟, DISC검사하기
사용자가 웹 브라우저에서 DISC 평가를 실시간으로 진행하고 결과를 바로 볼 수 있는 웹 애플리케이션을 만들어보겠습니다. 이를 위해 Python의 Flask 프레임워크를 사용하여 백엔드를 구현하고, HTML, CSS, JavaScript를 사용하여 프론트엔드를 구현하겠습니다.
마크업 언어이해...DISC 평가웹 애플리케이션
```python
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
# DISC 질문 리스트
questions = [
"새로운 프로젝트를 시작할 때, 나는 주로:",
"스트레스 상황에서 나는:",
# ... 나머지 26개 질문 추가 ...
]
# DISC 특성 설명
disc_descriptions = {
'D': "주도적, 결과 지향적, 자신감 있는 성향입니다.",
'I': "사교적, 낙관적, 열정적인 성향입니다.",
'S': "안정적, 협조적, 인내심 있는 성향입니다.",
'C': "신중한, 정확한, 체계적인 성향입니다."
}
@app.route('/')
def index():
return render_template('index.html', questions=questions)
@app.route('/calculate', methods=['POST'])
def calculate():
answers = request.json
scores = {'D': 0, 'I': 0, 'S': 0, 'C': 0}
for answer in answers:
if answer == 'a':
scores['D'] += 1
elif answer == 'b':
scores['I'] += 1
elif answer == 'c':
scores['C'] += 1
elif answer == 'd':
scores['S'] += 1
dominant_type = max(scores, key=scores.get)
description = disc_descriptions[dominant_type]
return jsonify({
'type': dominant_type,
'description': description,
'scores': scores
})
if __name__ == '__main__':
app.run(debug=True)
```
이제 HTML 템플릿을 만들어 보겠습니다.
<antArtifact identifier="disc-assessment-html" type="text/html" title="DISC 평가 HTML 템플릿">
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DISC 성격 유형 평가</title>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; }
h1 { text-align: center; }
.question { margin-bottom: 20px; }
button { display: block; margin: 20px auto; padding: 10px 20px; }
#result { margin-top: 20px; text-align: center; }
</style>
</head>
<body>
<h1>DISC 성격 유형 평가</h1>
<form id="discForm">
{% for index, question in enumerate(questions) %}
<div class="question">
<p>{{ index + 1 }}. {{ question }}</p>
<input type="radio" name="q{{ index }}" value="a" required> a)
<input type="radio" name="q{{ index }}" value="b"> b)
<input type="radio" name="q{{ index }}" value="c"> c)
<input type="radio" name="q{{ index }}" value="d"> d)
</div>
{% endfor %}
<button type="submit">결과 보기</button>
</form>
<div id="result"></div>
<script>
document.getElementById('discForm').addEventListener('submit', function(e) {
e.preventDefault();
const answers = [];
for (let i = 0; i < {{ questions|length }}; i++) {
answers.push(document.querySelector(`input[name="q${i}"]:checked`).value);
}
fetch('/calculate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(answers),
})
.then(response => response.json())
.then(data => {
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `
<h2>당신의 주요 DISC 유형은 ${data.type}입니다.</h2>
<p>${data.description}</p>
<h3>점수 분포:</h3>
<p>D: ${data.scores.D}, I: ${data.scores.I}, S: ${data.scores.S}, C: ${data.scores.C}</p>
`;
});
});
</script>
</body>
</html>
```
위 코드이름: app.py
코드의 해석
이 코드는 다음과 같이 작동합니다:
- Flask 서버가 실행되면 사용자에게 질문 폼을 보여줍니다.
- 사용자가 모든 질문에 답하고 "결과 보기" 버튼을 클릭하면, JavaScript가 응답을 수집하여 서버로 전송합니다.
- 서버는 응답을 분석하여 DISC 점수를 계산하고, 가장 높은 점수의 유형과 그에 대한 설명을 반환합니다.
- 결과가 페이지에 표시됩니다.
이 프로그램을 실행하려면:
- Flask를 설치합니다:
pip install flask - 위의 Python 코드를
app.py로 저장합니다. - HTML 코드를
templates폴더 안에index.html로 저장합니다. - 터미널에서
python app.py명령으로 서버를 실행합니다. - 웹 브라우저에서
http://localhost:5000에 접속하여 평가를 진행합니다.
이 프로그램은 기본적인 기능을 제공하며, 필요에 따라 디자인을 개선하거나 더 자세한 결과 분석을 추가할 수 있습니다.
댓글 쓰기