// LeadCenter.ai Quiz Application JavaScript
class QuizApp {
constructor() {
this.currentStep = 0;
this.totalSteps = 0;
this.answers = {};
this.correctAnswerTriggered = false;
this.currentQuestionAnsweredCorrectly = false;
this.questions = [
// Personal Details Questions
{
id: 1,
question: "Let's start with some basic information about you and your company",
type: "personal_details",
fields: [
{
name: "name",
label: "Name",
type: "text",
required: true,
placeholder: "Enter your full name"
},
{
name: "email",
label: "Email Address",
type: "email",
required: true,
placeholder: "Enter your email address"
},
{
name: "phone",
label: "Phone Number",
type: "tel",
required: true,
placeholder: "Enter your phone number"
},
{
name: "company",
label: "Company Name",
type: "text",
required: true,
placeholder: "Enter your company name"
},
{
name: "employees",
label: "Number of Employees",
type: "select",
required: true,
options: [
"1-5",
"6-10",
"11-20",
"20-50",
"More than 50 employees"
]
}
]
},
// Business Questions
{
id: 2,
question: "Which of the following AE Advisors use LeadCenter.AI?",
options: [
"Oak Harvest Financial Group",
"Howard Bailey",
"West Advisory Group",
"CA Educators",
"Legato Financials",
"Slagle Financials",
"Freedom Financials",
"Comprehensive Advisors",
"Jehm Wealth",
"Wealth Planning Network",
],
type: "multiple"
},
{
id: 3,
question: "Which challenges does LeadCenter.AI solve for financial advisors?",
options: [
"Reducing manual data entry",
"Breaking silos between marketing, sales, and operations",
"Automating tasks to save valuable time",
"Engaging more leads, faster",
"Boosting lead-to-appointment conversions",
"Driving higher revenue",
"Simplifying reports and insights",
],
type: "multiple"
},
{
id: 4,
question: "Which of the following functions does LeadCenter.AI automate for financial advisors?",
options: [
"Capturing leads from all sources (forms, phone calls, seminar registrations)",
"Pushing leads to Redtail, Wealthbox, and Salesforce",
"Verifying lead phone numbers and emails",
"Transcribing calls and attaching them to contact records",
"Creating landing pages and seminar forms on the advisor's website",
"Sending client review reminders so clients can book their own appointments",
"Producing advisor-specific reports (production reports, 1st appointment conversion, ROI, customer acquisition cost, etc.)",
"Capturing notes & tasks from Zoom calls under the contact record",
"Lead engagement in the sales funnel by triggering emails & texts based on lead criteria"
],
type: "multiple"
},
{
id: 5,
question: "How much can an RIA with 5 employees save, boost revenue, and cut software licensing costs by using LeadCenter.AI?",
options: [
"Save $10K annually, does not boost revenue, and not cut in software costs",
"Save $100K annually, boost revenue by 1x, and cut software costs by $5K",
"Save $223K annually by reclaiming up to 434 workdays, boost revenue by up to 3x, and cut software licensing costs by up to $22K"
],
type: "single"
}
];
// Banner messages for each question
this.bannerMessages = {
1: {
success: "That's the correct answer! Great job!",
wrong: "That is a wrong answer, please try again"
},
2: {
success: "Correct! Well done! Today, more than 1,000 advisors rely on LeadCenter.AI. The platform achieved 950% year-over-year growth last year—clear proof of the value it delivers to advisors",
wrong: "That is a wrong answer, please try again"
},
3: {
success: "That’s correct! LeadCenter.AI was designed in collaboration with financial advisors, built around their feedback to directly address these challenges",
wrong: "That is a wrong answer, please try again"
},
4: {
success: "That’s correct! LeadCenter.AI streamlines over 400 processes, empowering financial advisors to save time and focus on their clients.",
wrong: "That is a wrong answer, please try again"
},
5: {
success: "That’s correct! With LeadCenter.AI, advisors eliminate manual work, freeing up valuable time to focus on driving revenue and serving their clients.",
wrong: "That is a wrong answer, please try again"
}
};
this.init();
}
init() {
this.totalSteps = this.questions.length;
this.renderQuestions();
this.updateProgress();
}
renderQuestions() {
const container = document.querySelector('.question-container');
container.innerHTML = '';
this.questions.forEach((question, index) => {
const questionElement = this.createQuestionElement(question, index);
container.appendChild(questionElement);
});
}
createQuestionElement(question, index) {
const questionDiv = document.createElement('div');
questionDiv.className = `question-step ${index === 0 ? 'active' : ''}`;
questionDiv.id = `question-${question.id}`;
questionDiv.style.display = index === 0 ? 'block' : 'none';
const questionCard = document.createElement('div');
questionCard.className = 'question-card';
const questionTitle = document.createElement('h3');
questionTitle.className = 'question-title';
questionTitle.textContent = question.question;
questionCard.appendChild(questionTitle);
if (question.type === 'personal_details') {
// Create form for personal details
const formContainer = document.createElement('div');
formContainer.className = 'personal-details-form';
question.fields.forEach(field => {
const fieldGroup = document.createElement('div');
fieldGroup.className = 'form-group mb-3';
const label = document.createElement('label');
label.className = 'form-label';
label.textContent = field.label;
if (field.required) {
label.innerHTML += ' *';
}
let input;
if (field.type === 'select') {
input = document.createElement('select');
input.className = 'form-control';
input.name = `question-${question.id}-${field.name}`;
input.id = `q${question.id}-${field.name}`;
input.required = field.required;
// Add default option
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = `Select ${field.label.toLowerCase()}`;
input.appendChild(defaultOption);
// Add options
field.options.forEach(option => {
const optionElement = document.createElement('option');
optionElement.value = option;
optionElement.textContent = option;
input.appendChild(optionElement);
});
} else {
input = document.createElement('input');
input.type = field.type;
input.className = 'form-control';
input.name = `question-${question.id}-${field.name}`;
input.id = `q${question.id}-${field.name}`;
input.placeholder = field.placeholder;
input.required = field.required;
}
fieldGroup.appendChild(label);
fieldGroup.appendChild(input);
// Add email validation for email field (after input is added to fieldGroup)
if (field.type === 'email') {
this.addEmailValidation(input, fieldGroup);
}
// Add phone formatting for phone field
if (field.type === 'tel') {
this.addPhoneFormatting(input);
}
// Add event listener to update Next button state for personal details
if (question.type === 'personal_details') {
input.addEventListener('input', () => {
this.updateNavigationButtons();
});
input.addEventListener('change', () => {
this.updateNavigationButtons();
});
}
formContainer.appendChild(fieldGroup);
});
questionCard.appendChild(questionTitle);
questionCard.appendChild(formContainer);
} else {
// Create options for regular questions
const optionsList = document.createElement('ul');
optionsList.className = 'question-options';
question.options.forEach((option, optionIndex) => {
const optionItem = document.createElement('li');
optionItem.className = 'question-option';
const input = document.createElement('input');
input.type = question.type === 'multiple' ? 'checkbox' : 'radio';
input.className = 'option-input';
input.name = `question-${question.id}`;
input.value = option;
input.id = `q${question.id}-option${optionIndex}`;
// Add event listener for answer detection (correct or wrong)
input.addEventListener('change', (e) => {
if (question.id === 2) {
// Special handling for question 2 - multiple choice, all options must be selected
this.checkQuestion2Completion();
} else if (question.id === 3) {
// Special handling for question 3 - multiple choice, all options must be selected
this.checkQuestion3Completion();
} else if (question.id === 4) {
// Special handling for question 4 - multiple choice, all options must be selected
this.checkQuestion4Completion();
} else {
// Regular single choice questions
if (e.target.checked) {
// Check if this is a correct answer
if (question.id === 5 && option === 'Save $223K annually by reclaiming up to 434 workdays, boost revenue by up to 3x, and cut software licensing costs by up to $22K') {
// Correct answer
console.log('Correct answer selected!', e.target.checked);
this.currentQuestionAnsweredCorrectly = true;
if (!this.correctAnswerTriggered) {
this.correctAnswerTriggered = true;
this.hideWrongAnswerBanner();
this.showSuccessBanner();
this.playFireworks();
}
// Don't update navigation buttons - let popup handle progression
} else {
// Wrong answer
console.log('Wrong answer selected!', option);
this.currentQuestionAnsweredCorrectly = false;
this.hideSuccessBanner();
this.showWrongAnswerBanner();
this.updateNavigationButtons();
}
}
}
});
const label = document.createElement('label');
label.className = 'option-label';
label.htmlFor = `q${question.id}-option${optionIndex}`;
label.textContent = option;
// Add click listener to label for answer detection
label.addEventListener('click', () => {
setTimeout(() => {
if (question.id === 2) {
// Special handling for question 2 - multiple choice, all options must be selected
this.checkQuestion2Completion();
} else if (question.id === 3) {
// Special handling for question 3 - multiple choice, all options must be selected
this.checkQuestion3Completion();
} else if (question.id === 4) {
// Special handling for question 4 - multiple choice, all options must be selected
this.checkQuestion4Completion();
} else {
// Regular single choice questions
if (input.checked) {
// Check if this is a correct answer
if (question.id === 5 && option === 'Save $223K annually by reclaiming up to 434 workdays, boost revenue by up to 3x, and cut software licensing costs by up to $22K') {
// Correct answer
console.log('Label clicked for correct answer');
this.currentQuestionAnsweredCorrectly = true;
if (!this.correctAnswerTriggered) {
console.log('Input is checked, triggering effects');
this.correctAnswerTriggered = true;
this.hideWrongAnswerBanner();
this.showSuccessBanner();
this.playFireworks();
}
// Don't update navigation buttons - let popup handle progression
} else {
// Wrong answer
console.log('Label clicked for wrong answer');
this.currentQuestionAnsweredCorrectly = false;
this.hideSuccessBanner();
this.showWrongAnswerBanner();
this.updateNavigationButtons();
}
}
}
}, 100);
});
optionItem.appendChild(input);
optionItem.appendChild(label);
optionsList.appendChild(optionItem);
});
questionCard.appendChild(optionsList);
// Add hint for specific questions (after options)
// Hint removed as requested
}
questionDiv.appendChild(questionCard);
return questionDiv;
}
updateProgress() {
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');
const percentage = ((this.currentStep + 1) / this.totalSteps) * 100;
progressBar.style.width = `${percentage}%`;
progressText.textContent = `Question ${this.currentStep + 1} of ${this.totalSteps}`;
}
showQuestion(step) {
// Hide all questions
document.querySelectorAll('.question-step').forEach(question => {
question.style.display = 'none';
question.classList.remove('active');
});
// Show current question
const currentQuestion = document.getElementById(`question-${this.questions[step].id}`);
if (currentQuestion) {
currentQuestion.style.display = 'block';
currentQuestion.classList.add('active');
}
// Reset flags for new question
this.correctAnswerTriggered = false;
this.currentQuestionAnsweredCorrectly = false;
// Hide any existing banners
this.hideSuccessBanner();
this.hideWrongAnswerBanner();
// Update navigation buttons
this.updateNavigationButtons();
// Scroll to top of the page
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
updateNavigationButtons() {
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
// Show/hide previous button
if (this.currentStep === 0) {
prevBtn.style.display = 'none';
} else {
prevBtn.style.display = 'block';
}
// Update next button text
if (this.currentStep === this.totalSteps - 1) {
nextBtn.innerHTML = 'Submit Quiz';
} else {
nextBtn.innerHTML = 'Next';
}
// Disable Next button if current question hasn't been answered correctly
const currentQuestion = this.questions[this.currentStep];
if (currentQuestion && currentQuestion.type === 'personal_details') {
// For personal details, check if all required fields are filled
const allFieldsFilled = this.validateCurrentQuestion();
if (allFieldsFilled) {
nextBtn.disabled = false;
nextBtn.classList.remove('btn-disabled');
} else {
nextBtn.disabled = true;
nextBtn.classList.add('btn-disabled');
}
} else if (currentQuestion && (currentQuestion.id === 2 || currentQuestion.id === 3 || currentQuestion.id === 4)) {
// For questions 2, 3, and 4, enable when all options are selected
if (this.currentQuestionAnsweredCorrectly) {
nextBtn.disabled = false;
nextBtn.classList.remove('btn-disabled');
} else {
nextBtn.disabled = true;
nextBtn.classList.add('btn-disabled');
}
} else {
// For other quiz questions, disable until correct answer is selected
if (this.currentQuestionAnsweredCorrectly) {
nextBtn.disabled = false;
nextBtn.classList.remove('btn-disabled');
} else {
nextBtn.disabled = true;
nextBtn.classList.add('btn-disabled');
}
}
}
saveAnswer() {
const currentQuestion = this.questions[this.currentStep];
const questionId = currentQuestion.id;
if (currentQuestion.type === 'personal_details') {
this.answers[questionId] = {};
currentQuestion.fields.forEach(field => {
const input = document.querySelector(`input[name="question-${questionId}-${field.name}"], select[name="question-${questionId}-${field.name}"]`);
this.answers[questionId][field.name] = input ? input.value : '';
});
} else if (currentQuestion.type === 'multiple') {
const checkboxes = document.querySelectorAll(`input[name="question-${questionId}"]:checked`);
this.answers[questionId] = Array.from(checkboxes).map(cb => cb.value);
} else {
const radio = document.querySelector(`input[name="question-${questionId}"]:checked`);
this.answers[questionId] = radio ? radio.value : null;
}
}
loadAnswer() {
const currentQuestion = this.questions[this.currentStep];
const questionId = currentQuestion.id;
const savedAnswer = this.answers[questionId];
if (savedAnswer) {
if (currentQuestion.type === 'personal_details') {
currentQuestion.fields.forEach(field => {
const input = document.querySelector(`input[name="question-${questionId}-${field.name}"], select[name="question-${questionId}-${field.name}"]`);
if (input && savedAnswer[field.name]) {
input.value = savedAnswer[field.name];
}
});
} else if (currentQuestion.type === 'multiple') {
savedAnswer.forEach(answer => {
const checkbox = document.querySelector(`input[name="question-${questionId}"][value="${answer}"]`);
if (checkbox) checkbox.checked = true;
});
} else {
const radio = document.querySelector(`input[name="question-${questionId}"][value="${savedAnswer}"]`);
if (radio) radio.checked = true;
}
}
}
validateCurrentQuestion() {
const currentQuestion = this.questions[this.currentStep];
const questionId = currentQuestion.id;
if (currentQuestion.type === 'personal_details') {
// Check all required fields are filled
for (let field of currentQuestion.fields) {
if (field.required) {
const input = document.querySelector(`input[name="question-${questionId}-${field.name}"], select[name="question-${questionId}-${field.name}"]`);
if (!input || !input.value.trim()) {
return false;
}
// Validate email format if it's an email field
if (field.type === 'email') {
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailRegex.test(input.value.trim())) {
return false;
}
}
}
}
return true;
} else if (currentQuestion.type === 'multiple') {
if (questionId === 2 || questionId === 3 || questionId === 4) {
// For questions 2, 3, and 4, only allow progression if all options are selected
const allInputs = document.querySelectorAll(`input[name="question-${questionId}"]`);
const checkedInputs = document.querySelectorAll(`input[name="question-${questionId}"]:checked`);
return checkedInputs.length === allInputs.length;
} else {
// For other multiple choice questions, just check if at least one is selected
const checkboxes = document.querySelectorAll(`input[name="question-${questionId}"]:checked`);
return checkboxes.length > 0;
}
} else {
const radio = document.querySelector(`input[name="question-${questionId}"]:checked`);
return radio !== null;
}
}
nextQuestion() {
if (!this.validateCurrentQuestion()) {
const currentQuestion = this.questions[this.currentStep];
// Don't show validation messages for questions 2, 3, and 4
if (currentQuestion.id === 2 || currentQuestion.id === 3 || currentQuestion.id === 4) {
return;
}
let message = 'Please complete all required fields before proceeding.';
if (currentQuestion.type === 'personal_details') {
message = 'Please fill in all required fields and check your email format.';
} else if (currentQuestion.type === 'multiple') {
message = 'Please select at least one option before proceeding.';
} else {
message = 'Please select an answer before proceeding.';
}
this.showValidationMessage(message);
return;
}
this.saveAnswer();
if (this.currentStep < this.totalSteps - 1) {
this.currentStep++;
this.showQuestion(this.currentStep);
this.loadAnswer();
this.updateProgress();
} else {
this.submitQuiz();
}
}
previousQuestion() {
if (this.currentStep > 0) {
this.saveAnswer();
this.currentStep--;
this.showQuestion(this.currentStep);
this.loadAnswer();
this.updateProgress();
}
}
showValidationMessage(message) {
// Remove existing validation message
const existingMessage = document.querySelector('.validation-message');
if (existingMessage) {
existingMessage.remove();
}
// Create new validation message
const validationDiv = document.createElement('div');
validationDiv.className = 'alert alert-warning validation-message';
validationDiv.innerHTML = `${message}`;
// Insert after current question
const currentQuestion = document.querySelector('.question-step.active');
currentQuestion.appendChild(validationDiv);
// Auto-remove after 3 seconds
setTimeout(() => {
if (validationDiv.parentNode) {
validationDiv.remove();
}
}, 3000);
}
submitQuiz() {
this.saveAnswer();
// Show loading state
const nextBtn = document.getElementById('next-btn');
const originalText = nextBtn.innerHTML;
nextBtn.innerHTML = ' Submitting...';
nextBtn.disabled = true;
// Simulate API call
setTimeout(() => {
this.showThankYouStep();
}, 2000);
}
showThankYouStep() {
// Hide quiz steps
document.getElementById('quiz-steps').style.display = 'none';
// Show thank you step
document.getElementById('step-thankyou').style.display = 'block';
document.getElementById('step-thankyou').classList.add('active');
// Log answers for debugging
console.log('Quiz Answers:', this.answers);
}
restartQuiz() {
// Reset state
this.currentStep = 0;
this.answers = {};
this.correctAnswerTriggered = false;
this.currentQuestionAnsweredCorrectly = false;
// Hide thank you step
document.getElementById('step-thankyou').style.display = 'none';
document.getElementById('step-thankyou').classList.remove('active');
// Show intro step
document.getElementById('step-intro').style.display = 'block';
document.getElementById('step-intro').classList.add('active');
// Reset form
document.querySelectorAll('.option-input').forEach(input => {
input.checked = false;
});
// Hide banners
this.hideSuccessBanner();
this.hideWrongAnswerBanner();
this.updateProgress();
}
showSuccessBanner() {
console.log('Showing success popup...');
const popup = document.getElementById('success-popup');
if (popup) {
// Get current question and update text dynamically
const currentQuestion = this.questions[this.currentStep];
const message = this.bannerMessages[currentQuestion.id]?.success || "That's the correct answer! Great job!";
// Update the popup text
const popupText = document.getElementById('success-popup-text');
if (popupText) {
popupText.textContent = message;
}
// Update button text based on question number
const nextButton = popup.querySelector('button[onclick="proceedToNextQuestion()"]');
if (nextButton) {
if (currentQuestion.id === 5) {
nextButton.innerHTML = 'Submit Quiz ';
} else {
nextButton.innerHTML = 'Next Question ';
}
}
// Show the modal using Bootstrap
const modal = new bootstrap.Modal(popup);
modal.show();
console.log('Success popup displayed');
} else {
console.error('Success popup element not found!');
}
}
hideSuccessBanner() {
const popup = document.getElementById('success-popup');
if (popup) {
const modal = bootstrap.Modal.getInstance(popup);
if (modal) {
modal.hide();
}
}
}
showWrongAnswerBanner() {
console.log('Showing wrong answer banner...');
const banner = document.getElementById('wrong-answer-banner');
if (banner) {
// Get current question and update text dynamically
const currentQuestion = this.questions[this.currentStep];
const message = this.bannerMessages[currentQuestion.id]?.wrong || "That is a wrong answer, please try again";
// Update the banner text
const bannerText = banner.querySelector('strong');
if (bannerText) {
bannerText.textContent = message;
}
banner.style.display = 'block';
console.log('Wrong answer banner displayed');
// Auto-hide after 3 seconds
setTimeout(() => {
this.hideWrongAnswerBanner();
}, 3000);
} else {
console.error('Wrong answer banner element not found!');
}
}
hideWrongAnswerBanner() {
const banner = document.getElementById('wrong-answer-banner');
if (banner) {
banner.style.display = 'none';
}
}
addEmailValidation(input, fieldGroup) {
// Create error message element
const errorElement = document.createElement('div');
errorElement.className = 'email-error text-danger small mt-1';
errorElement.style.display = 'none';
errorElement.textContent = 'Please enter a valid email address in the format name@company.com';
// Add error element after the input
fieldGroup.appendChild(errorElement);
// Email validation function
const validateEmail = (email) => {
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return emailRegex.test(email);
};
// Add event listeners
input.addEventListener('blur', () => {
const email = input.value.trim();
if (email && !validateEmail(email)) {
errorElement.style.display = 'block';
input.classList.add('is-invalid');
} else {
errorElement.style.display = 'none';
input.classList.remove('is-invalid');
}
});
input.addEventListener('input', () => {
const email = input.value.trim();
if (email && !validateEmail(email)) {
errorElement.style.display = 'block';
input.classList.add('is-invalid');
} else {
errorElement.style.display = 'none';
input.classList.remove('is-invalid');
}
});
}
addPhoneFormatting(input) {
// Set placeholder to show the expected format
input.placeholder = '(XXX) XXX-XXXX';
// Add input event listener for formatting
input.addEventListener('input', (e) => {
let value = e.target.value.replace(/\D/g, ''); // Remove all non-digits
// Limit to 10 digits
if (value.length > 10) {
value = value.substring(0, 10);
}
// Format the phone number
let formattedValue = '';
if (value.length > 0) {
if (value.length <= 3) {
formattedValue = `(${value}`;
} else if (value.length <= 6) {
formattedValue = `(${value.substring(0, 3)}) ${value.substring(3)}`;
} else {
formattedValue = `(${value.substring(0, 3)}) ${value.substring(3, 6)}-${value.substring(6)}`;
}
}
e.target.value = formattedValue;
});
// Add keydown event listener to prevent non-numeric input
input.addEventListener('keydown', (e) => {
// Allow: backspace, delete, tab, escape, enter, home, end, left, right, up, down
if ([8, 9, 27, 13, 46, 35, 36, 37, 38, 39, 40].indexOf(e.keyCode) !== -1 ||
// Allow: Ctrl+A, Ctrl+C, Ctrl+V, Ctrl+X
(e.keyCode === 65 && e.ctrlKey === true) ||
(e.keyCode === 67 && e.ctrlKey === true) ||
(e.keyCode === 86 && e.ctrlKey === true) ||
(e.keyCode === 88 && e.ctrlKey === true)) {
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
// Add paste event listener to handle pasted content
input.addEventListener('paste', (e) => {
e.preventDefault();
const pastedData = e.clipboardData.getData('text');
const numbersOnly = pastedData.replace(/\D/g, '');
if (numbersOnly.length <= 10) {
input.value = numbersOnly;
input.dispatchEvent(new Event('input'));
}
});
}
checkQuestion2Completion() {
// Check if all options for question 2 are selected
const question2Inputs = document.querySelectorAll('input[name="question-2"]');
const checkedInputs = document.querySelectorAll('input[name="question-2"]:checked');
console.log(`Question 2: ${checkedInputs.length} of ${question2Inputs.length} options selected`);
if (checkedInputs.length === question2Inputs.length) {
// All options selected - show success popup
this.currentQuestionAnsweredCorrectly = true;
if (!this.correctAnswerTriggered) {
this.correctAnswerTriggered = true;
this.hideWrongAnswerBanner();
this.showSuccessBanner();
this.playFireworks();
}
// Don't update navigation buttons - let popup handle progression
} else {
// Not all options selected - hide success popup but don't show error
this.currentQuestionAnsweredCorrectly = false;
this.hideSuccessBanner();
this.hideWrongAnswerBanner(); // Don't show error message for question 2
this.updateNavigationButtons();
}
}
checkQuestion3Completion() {
// Check if all options for question 3 are selected
const question3Inputs = document.querySelectorAll('input[name="question-3"]');
const checkedInputs = document.querySelectorAll('input[name="question-3"]:checked');
console.log(`Question 3: ${checkedInputs.length} of ${question3Inputs.length} options selected`);
if (checkedInputs.length === question3Inputs.length) {
// All options selected - show success popup
this.currentQuestionAnsweredCorrectly = true;
if (!this.correctAnswerTriggered) {
this.correctAnswerTriggered = true;
this.hideWrongAnswerBanner();
this.showSuccessBanner();
this.playFireworks();
}
// Don't update navigation buttons - let popup handle progression
} else {
// Not all options selected - hide success popup but don't show error
this.currentQuestionAnsweredCorrectly = false;
this.hideSuccessBanner();
this.hideWrongAnswerBanner(); // Don't show error message for question 3
this.updateNavigationButtons();
}
}
checkQuestion4Completion() {
// Check if all options for question 4 are selected
const question4Inputs = document.querySelectorAll('input[name="question-4"]');
const checkedInputs = document.querySelectorAll('input[name="question-4"]:checked');
console.log(`Question 4: ${checkedInputs.length} of ${question4Inputs.length} options selected`);
if (checkedInputs.length === question4Inputs.length) {
// All options selected - show success popup
this.currentQuestionAnsweredCorrectly = true;
if (!this.correctAnswerTriggered) {
this.correctAnswerTriggered = true;
this.hideWrongAnswerBanner();
this.showSuccessBanner();
this.playFireworks();
}
// Don't update navigation buttons - let popup handle progression
} else {
// Not all options selected - hide success popup but don't show error
this.currentQuestionAnsweredCorrectly = false;
this.hideSuccessBanner();
this.hideWrongAnswerBanner(); // Don't show error message for question 4
this.updateNavigationButtons();
}
}
playFireworks() {
console.log('Playing confetti celebration...');
// Use confetti library for celebration
if (typeof confetti !== 'undefined') {
try {
// Multiple confetti bursts for better effect
const duration = 3000;
const animationEnd = Date.now() + duration;
const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 1000 };
function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}
const interval = setInterval(function() {
const timeLeft = animationEnd - Date.now();
if (timeLeft <= 0) {
return clearInterval(interval);
}
const particleCount = 50 * (timeLeft / duration);
// Launch confetti from different positions
confetti({
...defaults,
particleCount,
origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }
});
confetti({
...defaults,
particleCount,
origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }
});
}, 250);
console.log('Confetti celebration started');
} catch (error) {
console.error('Error with confetti:', error);
this.showCelebrationFallback();
}
} else {
console.log('Confetti library not available, using fallback');
this.showCelebrationFallback();
}
}
showCelebrationFallback() {
console.log('Showing celebration fallback...');
// Create a simple celebration overlay
const celebration = document.createElement('div');
celebration.id = 'celebration-fallback';
celebration.style.position = 'fixed';
celebration.style.top = '0';
celebration.style.left = '0';
celebration.style.width = '100%';
celebration.style.height = '100%';
celebration.style.background = 'linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57)';
celebration.style.display = 'flex';
celebration.style.alignItems = 'center';
celebration.style.justifyContent = 'center';
celebration.style.zIndex = '9999';
celebration.style.fontSize = '3rem';
celebration.style.fontWeight = 'bold';
celebration.style.color = 'white';
celebration.style.textAlign = 'center';
celebration.style.animation = 'pulse 0.5s ease-in-out infinite alternate';
celebration.innerHTML = '🎉
CORRECT!
🎉';
document.body.appendChild(celebration);
// Remove after 3 seconds
setTimeout(() => {
if (document.body.contains(celebration)) {
document.body.removeChild(celebration);
}
}, 3000);
}
}
// Global functions for button clicks
let quizApp;
function startQuiz() {
// Hide intro step
document.getElementById('step-intro').style.display = 'none';
document.getElementById('step-intro').classList.remove('active');
// Show quiz steps
document.getElementById('quiz-steps').style.display = 'block';
// Scroll to top of the page
window.scrollTo({
top: 0,
behavior: 'smooth'
});
// Initialize quiz app
quizApp = new QuizApp();
}
function nextQuestion() {
if (quizApp) {
quizApp.nextQuestion();
}
}
function previousQuestion() {
if (quizApp) {
quizApp.previousQuestion();
}
}
function restartQuiz() {
if (quizApp) {
quizApp.restartQuiz();
}
}
function proceedToNextQuestion() {
if (quizApp) {
// Hide the success popup
quizApp.hideSuccessBanner();
// Proceed to next question
quizApp.nextQuestion();
}
}
// Initialize when page loads
document.addEventListener('DOMContentLoaded', function() {
// Add smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add form validation styles
const style = document.createElement('style');
style.textContent = `
.validation-message {
margin-top: 1rem;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.option-label:focus-within {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
`;
document.head.appendChild(style);
// Test function for debugging
window.testFireworks = function() {
console.log('Testing fireworks and banner...');
if (quizApp) {
quizApp.showSuccessBanner();
quizApp.playFireworks();
} else {
console.log('Quiz app not initialized yet');
}
};
});
