Add 1 files

index.html

@@ -76,13 +76,8 @@
                     </div>
                     <h3 id="question-text" class="text-xl font-medium text-gray-800 mb-6">How would you describe yourself in social situations?</h3>
                     
-                    <div class="space-y-3">
-                        <button class="option-btn w-full text-left p-4 rounded-lg border border-gray-200">
-                            <span class="font-medium">I enjoy being around people and find social interactions energizing</span>
-                        </button>
-                        <button class="option-btn w-full text-left p-4 rounded-lg border border-gray-200">
-                            <span class="font-medium">I prefer one-on-one interactions or small groups, and need alone time to recharge</span>
-                        </button>
+                    <div id="options-container" class="space-y-3">
+                        <!-- Options will be inserted here by JavaScript -->
                     </div>
                 </div>
 
@@ -288,5 +283,171 @@
             },
             {
                 dimension: "E/I",
-                question: "At a party, you're
+                question: "At a party, you're more likely to:",
+                options: [
+                    "Be the one initiating conversations with new people",
+                    "Wait for others to approach you or stick with people you know"
+                ],
+                weights: [1, -1] // E vs I
+            },
+            {
+                dimension: "S/N",
+                question: "When someone describes a situation, you focus more on:",
+                options: [
+                    "The specific details and facts they mention",
+                    "The overall patterns and what it might mean"
+                ],
+                weights: [1, -1] // S vs N
+            },
+            {
+                dimension: "T/F",
+                question: "When giving feedback, you prioritize:",
+                options: [
+                    "Being honest and accurate, even if it might hurt feelings",
+                    "Being tactful and considerate of how the person will receive it"
+                ],
+                weights: [1, -1] // T vs F
+            },
+            {
+                dimension: "J/P",
+                question: "Your workspace is typically:",
+                options: [
+                    "Organized and tidy, with everything in its place",
+                    "A bit messy, but you know where things are"
+                ],
+                weights: [1, -1] // J vs P
+            },
+            {
+                dimension: "E/I",
+                question: "You consider yourself more:",
+                options: [
+                    "Outgoing and enthusiastic",
+                    "Reserved and reflective"
+                ],
+                weights: [1, -1] // E vs I
+            },
+            {
+                dimension: "S/N",
+                question: "You're more impressed by:",
+                options: [
+                    "Practical solutions that work in the real world",
+                    "Innovative ideas that could change how things are done"
+                ],
+                weights: [1, -1] // S vs N
+            },
+            {
+                dimension: "T/F",
+                question: "When making an important choice, you rely more on:",
+                options: [
+                    "Objective analysis and pros/cons lists",
+                    "Your gut feeling and personal values"
+                ],
+                weights: [1, -1] // T vs F
+            },
+            {
+                dimension: "J/P",
+                question: "You prefer schedules and deadlines to be:",
+                options: [
+                    "Followed closely and respected",
+                    "Flexible guidelines that can adapt to circumstances"
+                ],
+                weights: [1, -1] // J vs P
+            }
+        ];
+
+        // DOM elements
+        const welcomeScreen = document.getElementById('welcome-screen');
+        const questionScreen = document.getElementById('question-screen');
+        const resultsScreen = document.getElementById('results-screen');
+        const startBtn = document.getElementById('start-btn');
+        const prevBtn = document.getElementById('prev-btn');
+        const nextBtn = document.getElementById('next-btn');
+        const retakeBtn = document.getElementById('retake-btn');
+        const questionNumber = document.getElementById('question-number');
+        const dimension = document.getElementById('dimension');
+        const questionText = document.getElementById('question-text');
+        const optionsContainer = document.getElementById('options-container');
+        const progressBar = document.getElementById('progress-bar');
+        const mbtiType = document.getElementById('mbti-type');
+        const typeDescription = document.getElementById('type-description');
+        const eiBar = document.getElementById('ei-bar');
+        const snBar = document.getElementById('sn-bar');
+        const tfBar = document.getElementById('tf-bar');
+        const jpBar = document.getElementById('jp-bar');
+        const eiScore = document.getElementById('ei-score');
+        const snScore = document.getElementById('sn-score');
+        const tfScore = document.getElementById('tf-score');
+        const jpScore = document.getElementById('jp-score');
+
+        // Test state
+        let currentQuestion = 0;
+        let answers = [];
+        let scores = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 };
+
+        // Initialize the test
+        function initTest() {
+            currentQuestion = 0;
+            answers = [];
+            scores = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 };
+            showQuestion();
+        }
+
+        // Show current question
+        function showQuestion() {
+            const question = questions[currentQuestion];
+            
+            // Update question info
+            questionNumber.textContent = `Question ${currentQuestion + 1} of ${questions.length}`;
+            dimension.textContent = question.dimension;
+            questionText.textContent = question.question;
+            
+            // Update progress bar
+            progressBar.style.width = `${(currentQuestion / questions.length) * 100}%`;
+            
+            // Clear previous options
+            optionsContainer.innerHTML = '';
+            
+            // Add new options
+            question.options.forEach((option, index) => {
+                const optionBtn = document.createElement('button');
+                optionBtn.className = 'option-btn w-full text-left p-4 rounded-lg border border-gray-200';
+                optionBtn.innerHTML = `<span class="font-medium">${option}</span>`;
+                
+                // Check if this option was previously selected
+                if (answers[currentQuestion] === index) {
+                    optionBtn.classList.add('selected');
+                }
+                
+                optionBtn.addEventListener('click', () => selectOption(index));
+                optionsContainer.appendChild(optionBtn);
+            });
+            
+            // Update navigation buttons
+            prevBtn.disabled = currentQuestion === 0;
+            nextBtn.disabled = answers[currentQuestion] === undefined;
+        }
+
+        // Select an option
+        function selectOption(index) {
+            // Remove selected class from all options
+            document.querySelectorAll('.option-btn').forEach(btn => {
+                btn.classList.remove('selected');
+            });
+            
+            // Add selected class to clicked option
+            event.target.classList.add('selected');
+            
+            // Store answer
+            answers[currentQuestion] = index;
+            
+            // Enable next button
+            nextBtn.disabled = false;
+        }
+
+        // Calculate results
+        function calculateResults() {
+            // Reset scores
+            scores = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 };
+            
+
 </html>