Hugging Face's logo

Spaces:
Joe-Rawcliffe
/
percentage-quiz-trial
Running

App Files Community
percentage-quiz-trial / index.html
Joe-Rawcliffe's picture
Joe-Rawcliffe
Create me Diagnostic assessment that will assess someone's maths ability. I want this based of the Functional Skills maths curriculum, focusing on the entry level 3, level 1 and 2 two elements. I want the quiz to be dynamic, starting with easier questions but progressing to L2 questions if the learner gets them correct. Once the assessment is complete, I want the results to give me the learners overall level, as well as a level in the different topics. The questions used can be a mix of multiple choice or open questions that will self mark - Follow Up Deployment
db0a127 verified
raw
history blame
40.2 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Functional Skills Maths Diagnostic Assessment</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.progress-bar {
transition: width 0.5s ease-in-out;
}
.question-card {
transition: all 0.3s ease;
}
.answer-feedback {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.answer-feedback.show {
max-height: 100px;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>
</head>
<body class="bg-gray-100 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-4xl">
<!-- Header -->
<header class="text-center mb-8">
<h1 class="text-3xl md:text-4xl font-bold text-blue-800 mb-2">Functional Skills Maths</h1>
<h2 class="text-xl md:text-2xl font-semibold text-blue-600">Diagnostic Assessment</h2>
<p class="text-gray-600 mt-2">Entry Level 3 to Level 2</p>
</header>
<!-- Introduction Screen -->
<div id="intro-screen" class="bg-white rounded-lg shadow-md p-6 mb-8">
<div class="flex justify-center mb-6">
<i class="fas fa-calculator text-6xl text-blue-500"></i>
</div>
<h3 class="text-xl font-bold text-center mb-4">Welcome to your Maths Diagnostic Assessment</h3>
<p class="mb-4">This assessment will help determine your current level in Functional Skills Maths, from Entry Level 3 up to Level 2.</p>
<ul class="list-disc pl-5 mb-6 space-y-2">
<li>The test adapts to your ability - questions will get harder if you answer correctly</li>
<li>There are questions on number, measures, shape and space, and handling data</li>
<li>Take your time and try your best</li>
<li>The assessment will take approximately 20-30 minutes</li>
</ul>
<div class="flex flex-col space-y-4">
<div>
<label for="learner-name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
<input type="text" id="learner-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="Enter your name">
</div>
<button id="start-assessment" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-md transition duration-300">
Start Assessment <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
<!-- Assessment Screen -->
<div id="assessment-screen" class="hidden bg-white rounded-lg shadow-md p-6 mb-8">
<div class="flex justify-between items-center mb-6">
<div>
<span class="text-sm font-medium text-gray-500">Question <span id="current-question">1</span> of <span id="total-questions">20</span></span>
<h3 id="topic-area" class="text-lg font-semibold text-blue-600">Number</h3>
</div>
<div class="flex items-center">
<span class="text-sm font-medium text-gray-500 mr-2">Estimated Level:</span>
<span id="estimated-level" class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-semibold rounded">Entry Level 3</span>
</div>
</div>
<!-- Progress Bar -->
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-6">
<div id="progress-bar" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
<!-- Question Card -->
<div id="question-container" class="question-card">
<!-- Questions will be inserted here dynamically -->
</div>
<!-- Navigation Buttons -->
<div class="flex justify-between mt-8">
<button id="prev-question" class="text-blue-600 hover:text-blue-800 font-medium py-2 px-4 rounded-md transition duration-300 hidden">
<i class="fas fa-arrow-left mr-2"></i> Previous
</button>
<button id="next-question" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-md transition duration-300">
Next <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
<!-- Results Screen -->
<div id="results-screen" class="hidden bg-white rounded-lg shadow-md p-6 mb-8">
<div class="text-center mb-8">
<i class="fas fa-chart-bar text-6xl text-green-500 mb-4"></i>
<h3 class="text-2xl font-bold text-gray-800 mb-2">Assessment Complete!</h3>
<p class="text-gray-600">Here are your results, <span id="learner-result-name" class="font-semibold">Learner</span></p>
</div>
<!-- Overall Result -->
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-8">
<div class="flex items-center">
<div class="flex-shrink-0">
<i class="fas fa-award text-3xl text-blue-500"></i>
</div>
<div class="ml-3">
<h4 class="text-lg font-bold text-gray-800">Your Overall Level</h4>
<p class="text-gray-600">Based on your performance across all topics</p>
</div>
</div>
<div class="mt-4 text-center">
<span id="overall-level" class="inline-block px-4 py-2 text-xl font-bold bg-blue-100 text-blue-800 rounded-lg">Entry Level 3</span>
</div>
</div>
<!-- Topic Breakdown -->
<div class="mb-8">
<h4 class="text-lg font-bold text-gray-800 mb-4">Topic Breakdown</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Number -->
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<div class="flex items-center mb-2">
<i class="fas fa-sort-numeric-up text-blue-500 mr-2"></i>
<h5 class="font-semibold">Number</h5>
</div>
<div class="flex justify-between items-center">
<span id="number-level" class="text-sm font-medium px-2 py-1 bg-blue-100 text-blue-800 rounded">Entry Level 3</span>
<span id="number-score" class="text-sm text-gray-600">0/0 correct</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 mt-2">
<div id="number-progress" class="bg-blue-600 h-2 rounded-full" style="width: 0%"></div>
</div>
</div>
<!-- Measures -->
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<div class="flex items-center mb-2">
<i class="fas fa-ruler-combined text-green-500 mr-2"></i>
<h5 class="font-semibold">Measures</h5>
</div>
<div class="flex justify-between items-center">
<span id="measures-level" class="text-sm font-medium px-2 py-1 bg-green-100 text-green-800 rounded">Entry Level 3</span>
<span id="measures-score" class="text-sm text-gray-600">0/0 correct</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 mt-2">
<div id="measures-progress" class="bg-green-600 h-2 rounded-full" style="width: 0%"></div>
</div>
</div>
<!-- Shape & Space -->
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<div class="flex items-center mb-2">
<i class="fas fa-shapes text-purple-500 mr-2"></i>
<h5 class="font-semibold">Shape & Space</h5>
</div>
<div class="flex justify-between items-center">
<span id="shape-level" class="text-sm font-medium px-2 py-1 bg-purple-100 text-purple-800 rounded">Entry Level 3</span>
<span id="shape-score" class="text-sm text-gray-600">0/0 correct</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 mt-2">
<div id="shape-progress" class="bg-purple-600 h-2 rounded-full" style="width: 0%"></div>
</div>
</div>
<!-- Handling Data -->
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
<div class="flex items-center mb-2">
<i class="fas fa-chart-pie text-yellow-500 mr-2"></i>
<h5 class="font-semibold">Handling Data</h5>
</div>
<div class="flex justify-between items-center">
<span id="data-level" class="text-sm font-medium px-2 py-1 bg-yellow-100 text-yellow-800 rounded">Entry Level 3</span>
<span id="data-score" class="text-sm text-gray-600">0/0 correct</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 mt-2">
<div id="data-progress" class="bg-yellow-600 h-2 rounded-full" style="width: 0%"></div>
</div>
</div>
</div>
</div>
<!-- Recommendations -->
<div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6">
<h4 class="text-lg font-bold text-gray-800 mb-3">Recommendations</h4>
<div id="recommendations" class="space-y-3">
<p>Based on your results, we recommend focusing on:</p>
<ul class="list-disc pl-5 space-y-1">
<li>Basic number operations</li>
<li>Simple fractions and decimals</li>
</ul>
<p>Consider working through Entry Level 3 materials before progressing to higher levels.</p>
</div>
</div>
<!-- Actions -->
<div class="flex flex-col space-y-3 sm:flex-row sm:space-y-0 sm:space-x-3 justify-center">
<button id="restart-assessment" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-md transition duration-300">
<i class="fas fa-redo mr-2"></i> Restart Assessment
</button>
<button id="download-results" class="bg-white hover:bg-gray-100 text-gray-800 font-bold py-2 px-6 border border-gray-300 rounded-md transition duration-300">
<i class="fas fa-download mr-2"></i> Download Results
</button>
</div>
</div>
</div>
<script>
// Question bank organized by topic and level
const questions = {
number: [
// Entry Level 3
{
question: "What is 145 + 328?",
type: "multiple_choice",
options: ["463", "473", "573", "563"],
answer: "473",
level: "Entry Level 3",
topic: "number"
},
{
question: "Subtract 56 from 120",
type: "input",
answer: "64",
level: "Entry Level 3",
topic: "number"
},
{
question: "Multiply 15 by 6",
type: "input",
answer: "90",
level: "Entry Level 3",
topic: "number"
},
{
question: "Divide 84 by 7",
type: "input",
answer: "12",
level: "Entry Level 3",
topic: "number"
},
{
question: "Which is larger: 3/4 or 2/3?",
type: "multiple_choice",
options: ["3/4", "2/3", "They are equal"],
answer: "3/4",
level: "Entry Level 3",
topic: "number"
},
// Level 1
{
question: "Calculate 15% of £240",
type: "input",
answer: "36",
level: "Level 1",
topic: "number"
},
{
question: "Convert 0.75 to a fraction in its simplest form",
type: "multiple_choice",
options: ["3/4", "75/100", "7/10", "1/4"],
answer: "3/4",
level: "Level 1",
topic: "number"
},
{
question: "A meal costs £12.50. With a 20% tip, what's the total cost?",
type: "input",
answer: "15",
level: "Level 1",
topic: "number"
},
{
question: "Put these numbers in order from smallest to largest: 0.3, 1/4, 0.15, 1/2",
type: "multiple_choice",
options: ["0.15, 1/4, 0.3, 1/2", "1/4, 0.15, 1/2, 0.3", "0.3, 1/4, 0.15, 1/2"],
answer: "0.15, 1/4, 0.3, 1/2",
level: "Level 1",
topic: "number"
},
// Level 2
{
question: "A TV was £450. It's reduced by 15% in a sale. What's the new price?",
type: "input",
answer: "382.50",
level: "Level 2",
topic: "number"
},
{
question: "Simplify the ratio 24:18 to its simplest form",
type: "multiple_choice",
options: ["4:3", "8:6", "12:9", "3:2"],
answer: "4:3",
level: "Level 2",
topic: "number"
},
{
question: "Convert 5/8 to a decimal",
type: "input",
answer: "0.625",
level: "Level 2",
topic: "number"
},
{
question: "A recipe for 4 people uses 300g flour. How much flour is needed for 10 people?",
type: "input",
answer: "750",
level: "Level 2",
topic: "number"
}
],
measures: [
// Entry Level 3
{
question: "Convert 2.5kg to grams",
type: "input",
answer: "2500",
level: "Entry Level 3",
topic: "measures"
},
{
question: "How many milliliters are in 1.5 liters?",
type: "input",
answer: "1500",
level: "Entry Level 3",
topic: "measures"
},
{
question: "If it's 3:45pm now, what time will it be in 2 hours and 20 minutes?",
type: "multiple_choice",
options: ["5:05pm", "6:05pm", "5:45pm", "6:15pm"],
answer: "6:05pm",
level: "Entry Level 3",
topic: "measures"
},
// Level 1
{
question: "A room is 4.5m long and 3.2m wide. What is the perimeter of the room?",
type: "input",
answer: "15.4",
level: "Level 1",
topic: "measures"
},
{
question: "Convert 5 miles to kilometers (1 mile ≈ 1.6km)",
type: "input",
answer: "8",
level: "Level 1",
topic: "measures"
},
{
question: "A train leaves at 14:30 and arrives at 16:15. How long is the journey?",
type: "multiple_choice",
options: ["1 hour 30 minutes", "1 hour 45 minutes", "2 hours", "2 hours 15 minutes"],
answer: "1 hour 45 minutes",
level: "Level 1",
topic: "measures"
},
// Level 2
{
question: "A cuboid measures 12cm × 8cm × 5cm. What is its volume?",
type: "input",
answer: "480",
level: "Level 2",
topic: "measures"
},
{
question: "Convert 25°C to °F (F = C × 9/5 + 32)",
type: "input",
answer: "77",
level: "Level 2",
topic: "measures"
},
{
question: "A car travels 240 miles in 4 hours. What is its average speed in mph?",
type: "input",
answer: "60",
level: "Level 2",
topic: "measures"
}
],
shape: [
// Entry Level 3
{
question: "How many sides does a pentagon have?",
type: "input",
answer: "5",
level: "Entry Level 3",
topic: "shape"
},
{
question: "Which shape has 4 equal sides and 4 right angles?",
type: "multiple_choice",
options: ["Rectangle", "Rhombus", "Square", "Parallelogram"],
answer: "Square",
level: "Entry Level 3",
topic: "shape"
},
// Level 1
{
question: "Calculate the area of a triangle with base 6cm and height 4cm",
type: "input",
answer: "12",
level: "Level 1",
topic: "shape"
},
{
question: "What is the name of a 3D shape with 6 square faces?",
type: "multiple_choice",
options: ["Cylinder", "Cube", "Cuboid", "Pyramid"],
answer: "Cube",
level: "Level 1",
topic: "shape"
},
// Level 2
{
question: "A circle has a diameter of 10cm. What is its circumference? (π = 3.14)",
type: "input",
answer: "31.4",
level: "Level 2",
topic: "shape"
},
{
question: "Calculate the area of a trapezium with parallel sides 8cm and 12cm, and height 5cm",
type: "input",
answer: "50",
level: "Level 2",
topic: "shape"
}
],
data: [
// Entry Level 3
{
question: "In a survey, 15 people chose red as their favorite color, 10 chose blue, and 5 chose green. Which color was most popular?",
type: "multiple_choice",
options: ["Red", "Blue", "Green"],
answer: "Red",
level: "Entry Level 3",
topic: "data"
},
{
question: "If a dice is rolled, what is the probability of getting a 3?",
type: "multiple_choice",
options: ["1/2", "1/3", "1/6", "1/4"],
answer: "1/6",
level: "Entry Level 3",
topic: "data"
},
// Level 1
{
question: "The mean of five numbers is 8. Four of the numbers are 7, 9, 6, and 10. What is the fifth number?",
type: "input",
answer: "8",
level: "Level 1",
topic: "data"
},
{
question: "A bag contains 3 red, 4 blue and 5 green marbles. What is the probability of picking a blue marble?",
type: "multiple_choice",
options: ["1/3", "1/4", "1/5", "1/12"],
answer: "1/3",
level: "Level 1",
topic: "data"
},
// Level 2
{
question: "The median of five numbers is 12. Four of the numbers are 8, 15, 12, and 14. What is the fifth number?",
type: "input",
answer: "12",
level: "Level 2",
topic: "data"
},
{
question: "A pie chart shows how 120 people travel to work: 1/3 by car, 1/4 by bus, and the rest walk. How many walk?",
type: "input",
answer: "50",
level: "Level 2",
topic: "data"
}
]
};
// Assessment variables
let currentQuestionIndex = 0;
let userAnswers = [];
let currentLevel = "Entry Level 3";
let topicOrder = ["number", "measures", "shape", "data"];
let currentTopicIndex = 0;
let topicQuestions = [];
let assessmentComplete = false;
let learnerName = "";
// Initialize the assessment
document.getElementById('start-assessment').addEventListener('click', startAssessment);
document.getElementById('next-question').addEventListener('click', nextQuestion);
document.getElementById('prev-question').addEventListener('click', prevQuestion);
document.getElementById('restart-assessment').addEventListener('click', restartAssessment);
document.getElementById('download-results').addEventListener('click', downloadResults);
function startAssessment() {
learnerName = document.getElementById('learner-name').value.trim() || "Learner";
document.getElementById('learner-result-name').textContent = learnerName;
document.getElementById('intro-screen').classList.add('hidden');
document.getElementById('assessment-screen').classList.remove('hidden');
// Start with Entry Level 3 questions for the first topic
loadTopicQuestions(topicOrder[currentTopicIndex], currentLevel);
displayQuestion();
}
function loadTopicQuestions(topic, level) {
// Filter questions for the current topic and level
topicQuestions = questions[topic].filter(q => q.level === level);
// If no questions at this level, try higher levels
if (topicQuestions.length === 0 && level !== "Level 2") {
const nextLevel = level === "Entry Level 3" ? "Level 1" : "Level 2";
topicQuestions = questions[topic].filter(q => q.level === nextLevel);
currentLevel = nextLevel;
}
// Shuffle questions to randomize order
topicQuestions = shuffleArray(topicQuestions);
// Update UI to show current topic
document.getElementById('topic-area').textContent = getTopicName(topic);
}
function getTopicName(topic) {
const topicNames = {
number: "Number",
measures: "Measures",
shape: "Shape & Space",
data: "Handling Data"
};
return topicNames[topic];
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function displayQuestion() {
const questionContainer = document.getElementById('question-container');
const currentQuestion = topicQuestions[currentQuestionIndex];
// Update progress
const totalQuestions = topicQuestions.length;
const progress = ((currentQuestionIndex + 1) / totalQuestions) * 100;
document.getElementById('progress-bar').style.width = `${progress}%`;
document.getElementById('current-question').textContent = currentQuestionIndex + 1;
document.getElementById('total-questions').textContent = totalQuestions;
document.getElementById('estimated-level').textContent = currentLevel;
// Create question HTML based on type
let questionHTML = `
<div class="mb-6">
<h4 class="text-lg font-semibold text-gray-800 mb-4">${currentQuestion.question}</h4>
`;
if (currentQuestion.type === "multiple_choice") {
questionHTML += `<div class="space-y-3">`;
currentQuestion.options.forEach((option, i) => {
questionHTML += `
<div class="flex items-center">
<input id="option-${i}" name="answer" type="radio" value="${option}" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
<label for="option-${i}" class="ml-3 block text-gray-700">${option}</label>
</div>
`;
});
questionHTML += `</div>`;
} else {
questionHTML += `
<div class="mt-1 relative rounded-md shadow-sm max-w-xs">
<input type="number" id="answer-input" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-3 pr-12 py-2 sm:text-sm border-gray-300 rounded-md" placeholder="Your answer">
<div class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3">
<span class="text-gray-500 sm:text-sm"></span>
</div>
</div>
`;
}
questionHTML += `</div>`;
// Add feedback for previous question if available
if (userAnswers.length > 0 && userAnswers[userAnswers.length - 1].hasOwnProperty('isCorrect')) {
const lastAnswer = userAnswers[userAnswers.length - 1];
const feedbackClass = lastAnswer.isCorrect ? 'text-green-600' : 'text-red-600';
const feedbackIcon = lastAnswer.isCorrect ? 'fa-check-circle' : 'fa-times-circle';
const feedbackText = lastAnswer.isCorrect ? 'Correct!' : `Incorrect. The correct answer is ${lastAnswer.correctAnswer}.`;
questionHTML += `
<div class="answer-feedback show ${feedbackClass} mt-4 flex items-center">
<i class="fas ${feedbackIcon} mr-2"></i>
<span>${feedbackText}</span>
</div>
`;
}
questionContainer.innerHTML = questionHTML;
// Show/hide previous button
document.getElementById('prev-question').classList.toggle('hidden', currentQuestionIndex === 0);
// Update next button text if last question
const isLastQuestion = currentQuestionIndex === topicQuestions.length - 1;
document.getElementById('next-question').innerHTML = isLastQuestion ?
'Next Topic <i class="fas fa-arrow-right ml-2"></i>' :
'Next <i class="fas fa-arrow-right ml-2"></i>';
}
function nextQuestion() {
// Get user's answer
const currentQuestion = topicQuestions[currentQuestionIndex];
let userAnswer = "";
let isCorrect = false;
if (currentQuestion.type === "multiple_choice") {
const selectedOption = document.querySelector('input[name="answer"]:checked');
userAnswer = selectedOption ? selectedOption.value : "";
} else {
userAnswer = document.getElementById('answer-input').value.trim();
}
// Validate answer
if (!userAnswer) {
alert("Please provide an answer before proceeding.");
return;
}
// Check if answer is correct
isCorrect = userAnswer.toString() === currentQuestion.answer.toString();
// Store user's answer
userAnswers.push({
question: currentQuestion.question,
userAnswer: userAnswer,
correctAnswer: currentQuestion.answer,
isCorrect: isCorrect,
level: currentQuestion.level,
topic: currentQuestion.topic
});
// Determine next steps based on performance
if (isLastTopicQuestion()) {
if (isLastTopic()) {
completeAssessment();
} else {
moveToNextTopic();
}
} else {
currentQuestionIndex++;
displayQuestion();
}
}
function isLastTopicQuestion() {
return currentQuestionIndex === topicQuestions.length - 1;
}
function isLastTopic() {
return currentTopicIndex === topicOrder.length - 1;
}
function moveToNextTopic() {
currentTopicIndex++;
currentQuestionIndex = 0;
// Adjust level based on performance in previous topic
const topicPerformance = calculateTopicPerformance(topicOrder[currentTopicIndex - 1]);
if (topicPerformance.correctRate >= 0.8 && currentLevel !== "Level 2") {
currentLevel = currentLevel === "Entry Level 3" ? "Level 1" : "Level 2";
} else if (topicPerformance.correctRate < 0.5 && currentLevel !== "Entry Level 3") {
currentLevel = currentLevel === "Level 2" ? "Level 1" : "Entry Level 3";
}
loadTopicQuestions(topicOrder[currentTopicIndex], currentLevel);
displayQuestion();
}
function prevQuestion() {
if (currentQuestionIndex > 0) {
currentQuestionIndex--;
displayQuestion();
}
}
function completeAssessment() {
assessmentComplete = true;
document.getElementById('assessment-screen').classList.add('hidden');
document.getElementById('results-screen').classList.remove('hidden');
// Calculate overall and topic results
const overallLevel = calculateOverallLevel();
const topicResults = calculateAllTopicResults();
// Display results
document.getElementById('overall-level').textContent = overallLevel;
// Update each topic's results
topicOrder.forEach(topic => {
const result = topicResults[topic];
document.getElementById(`${topic}-level`).textContent = result.level;
document.getElementById(`${topic}-score`).textContent = `${result.correct}/${result.total} correct`;
document.getElementById(`${topic}-progress`).style.width = `${result.percentage}%`;
});
// Generate recommendations
generateRecommendations(overallLevel, topicResults);
}
function calculateOverallLevel() {
// Count correct answers at each level
const levelCounts = {
"Entry Level 3": { correct: 0, total: 0 },
"Level 1": { correct: 0, total: 0 },
"Level 2": { correct: 0, total: 0 }
};
userAnswers.forEach(answer => {
levelCounts[answer.level].total++;
if (answer.isCorrect) levelCounts[answer.level].correct++;
});
// Determine overall level based on performance at each level
if (levelCounts["Level 2"].total > 0 && levelCounts["Level 2"].correct / levelCounts["Level 2"].total >= 0.7) {
return "Level 2";
} else if (levelCounts["Level 1"].total > 0 && levelCounts["Level 1"].correct / levelCounts["Level 1"].total >= 0.7) {
return "Level 1";
} else {
return "Entry Level 3";
}
}
function calculateAllTopicResults() {
const results = {};
topicOrder.forEach(topic => {
results[topic] = calculateTopicPerformance(topic);
});
return results;
}
function calculateTopicPerformance(topic) {
const topicAnswers = userAnswers.filter(answer => answer.topic === topic);
const correct = topicAnswers.filter(answer => answer.isCorrect).length;
const total = topicAnswers.length;
const percentage = total > 0 ? Math.round((correct / total) * 100) : 0;
// Determine topic level based on performance
let level = "Entry Level 3";
if (topicAnswers.some(a => a.level === "Level 2") && percentage >= 70) {
level = "Level 2";
} else if (topicAnswers.some(a => a.level === "Level 1") && percentage >= 70) {
level = "Level 1";
}
return {
correct,
total,
percentage,
level
};
}
function generateRecommendations(overallLevel, topicResults) {
const recommendationsContainer = document.getElementById('recommendations');
let html = `<p class="mb-3">Based on your results, we recommend focusing on:</p><ul class="list-disc pl-5 mb-3 space-y-1">`;
// Add topic-specific recommendations
for (const topic in topicResults) {
const result = topicResults[topic];
if (result.percentage < 70) {
const topicName = getTopicName(topic);
html += `<li>${topicName} at ${result.level} level</li>`;
}
}
html += `</ul>`;
// Add level-specific advice
if (overallLevel === "Entry Level 3") {
html += `<p>You should work through Entry Level 3 materials before progressing to higher levels. Focus on building confidence with basic numeracy skills.</p>`;
} else if (overallLevel === "Level 1") {
html += `<p>You're ready for Level 1 work. Practice applying your skills to real-life situations and word problems.</p>`;
} else {
html += `<p>You're working at Level 2 standard. Challenge yourself with more complex problems and multi-step calculations.</p>`;
}
recommendationsContainer.innerHTML = html;
}
function restartAssessment() {
// Reset all variables
currentQuestionIndex = 0;
userAnswers = [];
currentLevel = "Entry Level 3";
currentTopicIndex = 0;
topicQuestions = [];
assessmentComplete = false;
// Show assessment screen and hide results
document.getElementById('results-screen').classList.add('hidden');
document.getElementById('assessment-screen').classList.remove('hidden');
// Reload first topic questions
loadTopicQuestions(topicOrder[currentTopicIndex], currentLevel);
displayQuestion();
}
function downloadResults() {
// Create a text version of the results
let resultsText = `Functional Skills Maths Diagnostic Assessment Results\n`;
resultsText += `Name: ${learnerName}\n`;
resultsText += `Date: ${new Date().toLocaleDateString()}\n\n`;
resultsText += `Overall Level: ${document.getElementById('overall-level').textContent}\n\n`;
resultsText += `Topic Breakdown:\n`;
topicOrder.forEach(topic => {
const topicName = getTopicName(topic);
const level = document.getElementById(`${topic}-level`).textContent;
const score = document.getElementById(`${topic}-score`).textContent;
resultsText += `${topicName}: ${level} (${score})\n`;
});
resultsText += `\nRecommendations:\n`;
resultsText += document.getElementById('recommendations').textContent;
// Create download link
const blob = new Blob([resultsText], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${learnerName.replace(/\s+/g, '_')}_Maths_Assessment_Results.txt`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Joe-Rawcliffe/percentage-quiz-trial" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>