HTML-CSS/personality-finder.html at main · Lab-Member-0010/HTML-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personality Quiz</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #e9ecef;
            margin: 0;
            padding: 20px;
        }
        .question-container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            max-width: 600px;
            margin: auto;
            transition: transform 0.3s;
        }
        .question-container:hover {
            transform: scale(1.02);
        }
        .question {
            font-size: 1.5em;
            margin-bottom: 20px;
            color: #333;
        }
        .options {
            display: flex;
            justify-content: space-between;
        }
        .options button {
            padding: 15px 20px;
            font-size: 1.2em;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: white;
            transition: background-color 0.3s, transform 0.2s;
            flex: 1;
            margin: 0 5px;
        }
        .options button:hover {
            background-color: #0056b3;
            transform: translateY(-2px);
        }
        #result {
            display: none;
            margin-top: 20px;
            font-size: 1.5em;
            text-align: center;
            color: #007bff;
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0,  0, 0, 0.2);
        }
    </style>
</head>

<body>

    <div class="question-container">
        <div id="question" class="question"></div>
        <div class="options">
            <button onclick="submitAnswer(5)">Strongly Agree</button>
            <button onclick="submitAnswer(4)">Agree</button>
            <button onclick="submitAnswer(3)">Average</button>
            <button onclick="submitAnswer(2)">Disagree</button>
            <button onclick="submitAnswer(1)">Strongly Disagree</button>
        </div>
    </div>

    <div id="result"></div>

    <script>
        const questions = [
            "How much do you enjoy socializing with new people?",
            "Do you feel drained after socializing, even in small groups?",
            "How often do you seek out new experiences?",
            "Do you often plan your activities in advance?",
            "How often do you prefer staying at home rather than going out?",
            "Are you usually the one to start conversations at a social gathering?",
            "Do you value harmony and avoid conflict at all costs?",
            "Do you tend to focus on the details rather than the big picture?",
            "How do you respond to criticism?",
            "Do you prefer working alone rather than in a group?",
            "How often do you feel anxious or nervous about the future?",
            "Do you enjoy brainstorming new ideas or concepts?",
            "Are you more of a 'doer' than a 'thinker'?",
            "How often do you find yourself taking charge in group situations?",
            "Do you often make decisions based on your feelings rather than logic?",
            "Are you careful about spending money?",
            "How often do you feel overwhelmed by your emotions?",
            "Do you find it easy to adapt to new situations?",
            "Do you prefer following established rules or making your own?",
            "How often do you seek out intellectual challenges?",
            "How often do you help others without expecting anything in return?",
            "Do you find it difficult to relax even when you have free time?",
            "How often do you follow through on your commitments?",
            "Do you enjoy trying new foods or cuisines?",
            "Are you more likely to trust others easily?",
            "How do you react to unexpected changes in plans?",
            "Do you feel uncomfortable when people express emotions openly?",
            "Do you prefer detailed plans over spontaneity?",
            "How important is it for you to have a routine?",
            "Do you prefer to avoid conflict even if you disagree with someone?",
            "Do you feel at ease in large social gatherings?",
            "How often do you feel a sense of accomplishment after completing a task?",
            "Do you often feel the need to be in control of situations?",
            "How often do you find yourself worrying about your performance or success?",
            "Are you more comfortable with facts and data than with abstract ideas?"
        ];

        const answers = [];
        let currentQuestionIndex = 0;

        function displayQuestion() {
            if (currentQuestionIndex < questions.length) {
                document.getElementById('question').innerText = questions[currentQuestionIndex];
            } else {
                calculateAndDisplayResults();
            }
        }

        function submitAnswer(answer) {
            answers.push(answer);
            console.log(answers); // Debugging: Check the answers array
            currentQuestionIndex++;
            displayQuestion();
        }

        function calculateScores(answers) {
            const scores = {
                E_I: 0,
                S_N: 0,
                T_F: 0,
                J_P: 0,
            };

            // Adjust scoring logic based on the question indices
            // Example: Adjust the indices based on your specific questions
            scores.E_I += answers[0] + answers[1] + answers[2] + answers[3]; // Extraversion
            scores.E_I -= answers[16] + answers[17] + answers[18] + answers[19]; // Introversion

            scores.S_N += answers[4] + answers[5] + answers[6] + answers[7]; // Sensing
            scores.S_N -= answers[20] + answers[21] + answers[22] + answers[23]; // Intuition

            scores.T_F += answers[8] + answers[9] + answers[10] + answers[11]; // Thinking
            scores.T_F -= answers[24] + answers[25] + answers[26] + answers[27]; // Feeling

            scores.J_P += answers[12] + answers[13] + answers[14] + answers[15]; // Judging
            scores.J_P -= answers[28] + answers[29] + answers[30] + answers[31]; // Perceiving

            return scores;
        }

        function getPersonalityType(scores) {
            const personality = [];
            personality.push(scores.E_I > 0 ? 'E' : 'I');
            personality.push(scores.S_N > 0 ? 'S' : 'N');
            personality.push(scores.T_F > 0 ? 'T' : 'F');
            personality.push(scores.J_P > 0 ? 'J' : 'P');
            return personality.join('');
        }

        function calculateAndDisplayResults() {
            const scores = calculateScores(answers);
            const personalityType = getPersonalityType(scores);
            document.getElementById('result').innerText = `Your personality type is: ${personalityType}`;
            document.getElementById('result').style.display = 'block';
        }

        displayQuestion();
    </script>

</body>

</html>