script.js

// set to true if opening HTML file directly without a web server
const HOSTED_LOCALLY = true;

// questions data used when HOSTED_LOCALLY is true
EMBEDDED_QUESTIONS = [
	{
		"id": 1,
		"question": "What's nine plus ten?",
		"answer": "21"
	},
	{
		"id": 2,
		"question": "Amogus is..?",
		"answer": "Sus"
	},
	{
		"id": 3,
		"question": "What is Obama's last name?",
		"answer": "Obambam"
	}
];

// key for storing custom questions in sessionStorage
const STORAGE_KEY = 'customQuestions';

let questionsData = [];

// load custom questions from sessionStorage
function loadCustomQuestions() 
{
	const stored = sessionStorage.getItem(STORAGE_KEY);
	return stored ? JSON.parse(stored) : [];
}
let userMatches = {}; // user's matches: { questionId: answerId }
let selectedQuestion = null;
let selectedAnswer = null;
let isSubmitted = false;

const questionsContainer = document.getElementById('questions');
const answersContainer = document.getElementById('answers');
const submitBtn = document.getElementById('submit-btn');
const resetBtn = document.getElementById('reset-btn');
const resultMessage = document.getElementById('result-message');
const connectionsSvg = document.getElementById('connections-svg');

async function init() 
{
	try 
	{
		if (HOSTED_LOCALLY) 
		{
			// use embedded questions data for local testing
			questionsData = EMBEDDED_QUESTIONS;
		} 
		else 
		{
			// fetch questions from JSON file (requires web server)
			const response = await fetch('questions.json');
			questionsData = await response.json();
		}
		
		// merge custom questions from sessionStorage
		const customQuestions = loadCustomQuestions();
		questionsData = [...questionsData, ...customQuestions];
		
		setupQuiz();
	} 
	catch (error) 
	{
		console.error('Error loading questions:', error);
		resultMessage.textContent = 'Error loading quiz data!';
		resultMessage.style.background = 'rgba(245, 101, 101, 0.3)';
	}
}

// setup quiz
function setupQuiz() 
{
	// clear containers
	questionsContainer.innerHTML = '';
	answersContainer.innerHTML = '';
	connectionsSvg.innerHTML = '';
	userMatches = {};
	selectedQuestion = null;
	selectedAnswer = null;
	isSubmitted = false;
	resultMessage.textContent = '';
	submitBtn.style.display = 'inline-block';
	resetBtn.style.display = 'none';
	submitBtn.disabled = false;
	
	const shuffledQuestions = shuffleArray([...questionsData]);
	const shuffledAnswers = shuffleArray([...questionsData]);
	
	// render questions
	shuffledQuestions.forEach((item, index) => 
	{
		const questionBox = createItemBox(item.id, item.question, 'question', index + 1);
		questionsContainer.appendChild(questionBox);
	});
	
	// render answers
	shuffledAnswers.forEach((item, index) => 
	{
		const answerBox = createItemBox(item.id, item.answer, 'answer', index + 1);
		answersContainer.appendChild(answerBox);
	});
}

// create a question or answer box
function createItemBox(id, text, type, displayNumber) 
{
	const box = document.createElement('div');
	box.className = 'item';
	box.dataset.id = id;
	box.dataset.type = type;
	box.innerHTML = `<span class="item-number">${displayNumber}</span>${text}`;
	
	box.addEventListener('click', () => handleItemClick(box, id, type));
	
	return box;
}

// handle clicking on question or answer
function handleItemClick(element, id, type) 
{
	if (isSubmitted) return;
	
	if (type === 'question') 
		{
		// if clicking the same question, deselect it
		if (selectedQuestion === id) 
			{
			element.classList.remove('selected');
			selectedQuestion = null;
			return;
		}
		
		// clear previous question selection
		document.querySelectorAll('.item[data-type="question"]').forEach(q => 
			{
				if (q.dataset.id !== id.toString()) {
					q.classList.remove('selected');
			}
		});
		
		// select this question
		element.classList.add('selected');
		selectedQuestion = id;
		
		// check if we should create a match
		if (selectedAnswer !== null) 
		{
			createMatch(selectedQuestion, selectedAnswer);
		}
	} 
	else if (type === 'answer') 
	{
		// if clicking the same answer, deselect it
		if (selectedAnswer === id) 
		{
			element.classList.remove('selected');
			selectedAnswer = null;
			return;
		}
		
		// clear previous answer selection
		document.querySelectorAll('.item[data-type="answer"]').forEach(a => 
			{
				if (a.dataset.id !== id.toString()) {
					a.classList.remove('selected');
			}
		});
		
		// select this answer
		element.classList.add('selected');
		selectedAnswer = id;
		
		// sheck if we should create a match
		if (selectedQuestion !== null) 
		{
			createMatch(selectedQuestion, selectedAnswer);
		}
	}
}

// create a match between a question and answer
function createMatch(questionId, answerId) 
{
	// remove previous match if question was already matched
	if (userMatches[questionId]) 
		{
		const oldAnswerElement = document.querySelector(`.item[data-type="answer"][data-id="${userMatches[questionId]}"]`);
		if (oldAnswerElement) 
		{
			oldAnswerElement.classList.remove('connected');
		}
	}
	
	// store the new match
	userMatches[questionId] = answerId;
	
	// update visual state
	const questionElement = document.querySelector(`.item[data-type="question"][data-id="${questionId}"]`);
	const answerElement = document.querySelector(`.item[data-type="answer"][data-id="${answerId}"]`);
	
	questionElement.classList.remove('selected');
	questionElement.classList.add('connected');
	answerElement.classList.remove('selected');
	answerElement.classList.add('connected');
	
	// draw connection line
	drawConnection(questionElement, answerElement);
	
	// reset selections
	selectedQuestion = null;
	selectedAnswer = null;
	
	// enable submit button when all questions are matched
	if (Object.keys(userMatches).length === questionsData.length) 
	{
		submitBtn.disabled = false;
	}
}

// draws a visual connection line between matched items
function drawConnection(questionElement, answerElement) 
{
	const qRect = questionElement.getBoundingClientRect();
	const aRect = answerElement.getBoundingClientRect();
	
	const x1 = qRect.right;
	const y1 = qRect.top + qRect.height / 2;
	const x2 = aRect.left;
	const y2 = aRect.top + aRect.height / 2;
	
	// create SVG line
	const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
	line.setAttribute('x1', x1);
	line.setAttribute('y1', y1);
	line.setAttribute('x2', x2);
	line.setAttribute('y2', y2);
	line.setAttribute('class', 'connection-line');
	line.dataset.questionId = questionElement.dataset.id;
	line.dataset.answerId = answerElement.dataset.id;
	
	connectionsSvg.appendChild(line);
}

// redraw all connection lines (after scrolling or resizing)
function redrawConnections() 
{
	connectionsSvg.innerHTML = '';
	
	for (const [questionId, answerId] of Object.entries(userMatches)) 
	{
		const questionElement = document.querySelector(`.item[data-type="question"][data-id="${questionId}"]`);
		const answerElement = document.querySelector(`.item[data-type="answer"][data-id="${answerId}"]`);
		
		if (questionElement && answerElement) 
		{
			drawConnection(questionElement, answerElement);
		}
	}
}

// submit answers and align answers to questions
function submitAnswers() 
{
	if (Object.keys(userMatches).length !== questionsData.length) 
	{
		resultMessage.textContent = 'Please match all questions before submitting!';
		resultMessage.style.background = 'rgba(245, 101, 101, 0.3)';
		return;
	}
	
	isSubmitted = true;
	submitBtn.disabled = true;
	connectionsSvg.innerHTML = ''; // clear connection lines
	
	// calculate score
	let correctCount = 0;
	questionsData.forEach(item => 
	{
		if (userMatches[item.id] === item.id) 
		{
			correctCount++;
		}
	});
	
	// display result
	resultMessage.textContent = `You got ${correctCount} out of ${questionsData.length} correct!`;
	if (correctCount === questionsData.length) 
	{
		resultMessage.style.background = 'rgba(72, 187, 120, 0.3)';
	} 
	else 
	{
		resultMessage.style.background = 'rgba(237, 137, 54, 0.3)';
	}
	
	// align the answers to match questions
	alignAnswersToQuestions();
	
	// show reset button
	resetBtn.style.display = 'inline-block';
	submitBtn.style.display = 'none';
}

// align answer boxes to match their corresponding questions
function alignAnswersToQuestions() 
{
	const questionElements = Array.from(questionsContainer.querySelectorAll('.item'));
	const answerElements = Array.from(answersContainer.querySelectorAll('.item'));
	
	// create map of answer elements by ID for quick lookup
	const answerMap = {};
	answerElements.forEach(el => 
	{
		answerMap[el.dataset.id] = el;
	});
	
	// reorder answers to match questions and add visual feedback
	questionElements.forEach((questionEl, index) => 
	{
		const questionId = parseInt(questionEl.dataset.id);
		const correctAnswer = questionsData.find(q => q.id === questionId);
		const correctAnswerId = correctAnswer.id;
		
		// find the correct answer element
		const correctAnswerEl = answerMap[correctAnswerId];
		
		// check if user's match was correct
		const isCorrect = userMatches[questionId] === correctAnswerId;
		
		// add appropriate class
		questionEl.classList.remove('connected');
		questionEl.classList.add('aligned');
		
		if (isCorrect) 
		{
			questionEl.classList.add('correct');
			correctAnswerEl.classList.add('correct');
		} 
		else 
		{
			questionEl.classList.add('incorrect');
			
			// mark the incorrectly matched answer
			const userAnswerEl = answerMap[userMatches[questionId]];
			if (userAnswerEl) 
			{
				userAnswerEl.classList.add('incorrect');
			}
		}
		
		// reorder the answer element to align with question
		correctAnswerEl.classList.remove('connected');
		correctAnswerEl.classList.add('aligned');
		answersContainer.appendChild(correctAnswerEl);
	});
}

// shuffle array using Fisher-Yates algorithm
function shuffleArray(array) 
{
	const shuffled = [...array];
	for (let i = shuffled.length - 1; i > 0; i--) 
	{
		const j = Math.floor(Math.random() * (i + 1));
		[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
	}
	return shuffled;
}

// event listeners
submitBtn.addEventListener('click', submitAnswers);
resetBtn.addEventListener('click', setupQuiz);
window.addEventListener('resize', redrawConnections);
window.addEventListener('scroll', redrawConnections);


init();