본문 바로가기
AI HTML 코딩

AI로 만든 강아지 MBTI 테스트: HTML 코드 공유

by 지능형 2024. 8. 31.

HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>강아지 MBTI 테스트</title>
    <link href="글씨체 설정" rel="stylesheet"> <!-- 글꼴을 설정하는 링크 -->
    <style>
        /* CSS 스타일 정의 */
    </style>
</head>
<body>
    <div class="container">
        <img src="이미지 주소" alt="귀여운 강아지" class="dog-image"> <!-- 강아지 이미지를 표시 -->
        <h1>강아지 MBTI 테스트</h1> <!-- 페이지 제목 -->
        <form id="mbtiForm">
            <div class="question active">
                <p>1. 강아지가 새로운 공원에 갔을 때, 어떻게 행동하나요?</p> <!-- 질문 텍스트 -->
                <label><input name="q1" type="radio" value="E" /> 활발하게 뛰어다니며 다른 사람이나 동물에게 다가갑니다.</label> <!-- 첫 번째 선택지 -->
                <label><input name="q1" type="radio" value="I" /> 천천히 주변을 탐색하며 보호자의 곁에 머무릅니다.</label> <!-- 두 번째 선택지 -->
            </div>
            <!-- ... 추가 질문 ... -->
            <button id="nextButton" type="button">다음</button> <!-- 다음 질문으로 넘어가는 버튼 -->
        </form>
        <div id="result" class="result">&nbsp;</div> <!-- 결과를 표시할 영역 -->
    </div>
</body>
</html>

 

CSS 코드

body {
    background-color: #f0f0f0; /* 배경색 설정 */
    padding: 20px; /* 패딩 설정 */
}
.container {
    background-color: #EEF0ED; /* 컨테이너 배경색 */
    border-radius: 10px; /* 테두리 둥글게 설정 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
    max-width: 600px; /* 최대 너비 설정 */
    margin: 0 auto; /* 중앙 정렬 */
    padding: 20px; /* 패딩 설정 */
    text-align: center; /* 텍스트 중앙 정렬 */
}
h1 {
    font-family: 'Gaegu', sans-serif; /* 글꼴 설정 */
    color: #B9E2D4; /* 글자색 설정 */
    font-size: 40px; /* 글자 크기 설정 */
    margin-bottom: 10px; /* 아래쪽 여백 */
}
.dog-image {
    width: 300px; /* 이미지 너비 */
    height: auto; /* 높이 자동 조절 */
    margin-bottom: 5px; /* 아래쪽 여백 */
    border-radius: 50%; /* 둥근 이미지 */
}
.question {
    display: none; /* 기본적으로 숨김 */
    margin-bottom: 10px; /* 아래쪽 여백 */
    padding: 15px; /* 패딩 설정 */
}
.question.active {
    display: block; /* 활성화된 질문 표시 */
}
.question p {
    font-family: 'Gaegu', sans-serif; /* 글꼴 설정 */
    margin-bottom: 10px; /* 아래쪽 여백 */
    font-weight: bold; /* 글자 굵게 */
    color: #333; /* 글자색 설정 */
    font-size: 25px; /* 글자 크기 설정 */
}
label {
    font-family: 'Gaegu', sans-serif; /* 글꼴 설정 */
    display: block; /* 블록 요소로 설정 */
    margin-bottom: 5px; /* 아래쪽 여백 */
    cursor: pointer; /* 커서 모양 설정 */
    color: #555; /* 글자색 설정 */
    font-size: 22px; /* 글자 크기 설정 */
}
input[type="radio"] {
    margin-right: 5px; /* 오른쪽 여백 */
}
button {
    font-family: 'Gaegu', sans-serif; /* 글꼴 설정 */
    padding: 10px 15px; /* 패딩 설정 */
    background-color: #007BFF; /* 배경색 설정 */
    color: white; /* 글자색 설정 */
    border: none; /* 테두리 없음 */
    border-radius: 5px; /* 둥근 테두리 설정 */
    font-size: 20px; /* 글자 크기 설정 */
    cursor: pointer; /* 커서 모양 설정 */
    margin-top: 10px; /* 위쪽 여백 */
}
.result {
    font-family: 'Gaegu', sans-serif; /* 글꼴 설정 */
    font-weight: bold; /* 글자 굵게 */
    color: #333; /* 글자색 설정 */
    margin-top: 10px; /* 위쪽 여백 */
    padding: 15px; /* 패딩 설정 */
    background-color: #d4edda; /* 배경색 설정 */
    border-radius: 10px; /* 둥근 테두리 설정 */
    font-size: 22px; /* 글자 크기 설정 */
    text-align: center; /* 텍스트 중앙 정렬 */
}
.result .percentages {
    font-family: 'Gaegu', sans-serif; /* 글꼴 설정 */
    color: white; /* 글자색 설정 */
}

 

JavaScript

let currentQuestion = 0; // 현재 질문의 인덱스를 저장하는 변수
const questions = document.querySelectorAll('.question'); // 모든 질문 요소를 선택
const nextButton = document.getElementById('nextButton'); // '다음' 버튼을 선택
const result = document.getElementById('result'); // 결과를 표시할 영역 선택

const mbtiScores = { // MBTI 점수를 저장할 객체
    E: 0, I: 0,
    S: 0, N: 0,
    T: 0, F: 0,
    J: 0, P: 0
};

const mbtiDescriptions = { // 각 MBTI 유형에 대한 설명을 저장할 객체
    "ISTJ": "ISTJ (충실한 수호자):<br>충실하고 안정적인 성향을 가진 강아지로, 일관된 일상을 좋아합니다.<br>보호자에게 헌신적이며, 명확한 지시를 따르는 것을 선호합니다.",
    // ... 다른 MBTI 설명들 ...
};

function showQuestion(index) { // 특정 질문을 화면에 표시하는 함수
    questions.forEach((question, i) => {
        question.classList.toggle('active', i === index); // 현재 질문만 표시
    });
}

function calculateMBTI() { // MBTI 결과를 계산하는 함수
    const EorI = mbtiScores.E >= mbtiScores.I ? 'E' : 'I'; // E와 I 중 더 높은 점수를 선택
    const SorN = mbtiScores.S >= mbtiScores.N ? 'S' : 'N'; // S와 N 중 더 높은 점수를 선택
    const TorF = mbtiScores.T >= mbtiScores.F ? 'T' : 'F'; // T와 F 중 더 높은 점수를 선택
    const JorP = mbtiScores.J >= mbtiScores.P ? 'J' : 'P'; // J와 P 중 더 높은 점수를 선택
    return EorI + SorN + TorF + JorP; // 최종 MBTI 유형 반환
}

function calculatePercentage() { // 각 유형의 퍼센티지를 계산하는 함수
    const totalEI = mbtiScores.E + mbtiScores.I; // E와 I의 총합
    const totalSN = mbtiScores.S + mbtiScores.N; // S와 N의 총합
    const totalTF = mbtiScores.T + mbtiScores.F; // T와 F의 총합
    const totalJP = mbtiScores.J + mbtiScores.P; // J와 P의 총합

    const EPercent = Math.round((mbtiScores.E / totalEI) * 100); // E의 퍼센트 계산
    const IPercent = Math.round((mbtiScores.I / totalEI) * 100); // I의 퍼센트 계산
    const SPercent = Math.round((mbtiScores.S / totalSN) * 100); // S의 퍼센트 계산
    const NPercent = Math.round((mbtiScores.N / totalSN) * 100); // N의 퍼센트 계산
    const TPercent = Math.round((mbtiScores.T / totalTF) * 100); // T의 퍼센트 계산
    const FPercent = Math.round((mbtiScores.F / totalTF) * 100); // F의 퍼센트 계산
    const JPercent = Math.round((mbtiScores.J / totalJP) * 100); // J의 퍼센트 계산
    const PPercent = Math.round((mbtiScores.P / totalJP) * 100); // P의 퍼센트 계산

    return {
        EPercent, IPercent, SPercent, NPercent, TPercent, FPercent, JPercent, PPercent
    }; // 퍼센트 결과 반환
}

nextButton.addEventListener('click', () => { // '다음' 버튼 클릭 이벤트 핸들러
    const selectedOption = document.querySelector(`input[name="q${currentQuestion + 1}"]:checked`); // 선택된 답변
    if (selectedOption) { // 답변이 선택되었는지 확인
        mbtiScores[selectedOption.value]++; // 선택된 답변의 점수 증가
        currentQuestion++; // 다음 질문으로 이동
        if (currentQuestion < questions.length) { // 아직 질문이 남아있는지 확인
            showQuestion(currentQuestion); // 다음 질문 표시
        } else { // 모든 질문에 답변한 경우
            const mbtiResult = calculateMBTI(); // MBTI 결과 계산
            const percentages = calculatePercentage(); // 퍼센트 계산
            result.innerHTML = `
                <p>당신의 강아지 MBTI는 <strong>${mbtiResult}</strong> 입니다!</p>
                <p>${mbtiDescriptions[mbtiResult]}</p>
                <p class="percentages">
                    E: ${percentages.EPercent}% / I: ${percentages.IPercent}%<br>
                    S: ${percentages.SPercent}% / N: ${percentages.NPercent}%<br>
                    T: ${percentages.TPercent}% / F: ${percentages.FPercent}%<br>
                    J: ${percentages.JPercent}% / P: ${percentages.PPercent}%
                </p>
            `; // 결과 표시
            result.style.display = 'block'; // 결과 영역 표시
            nextButton.style.display = 'none'; // '다음' 버튼 숨기기
        }
    } else {
        alert('질문에 답변해주세요!'); // 답변이 선택되지 않은 경우 경고
    }
});

showQuestion(currentQuestion); // 첫 번째 질문 표시

'AI HTML 코딩' 카테고리의 다른 글

AI로 만든 강아지 MBTI 테스트: 내 강아지 성격 유형은?  (0) 2024.08.31
AI로 코딩한 HTML 인터랙티브 미로 게임 만들기: 단계별 가이드  (0) 2024.08.30
AI로 코딩한 HTML 인터랙티브 미로 게임 만들기: 실행편  (0) 2024.08.30

관련글

티스토리툴바