Matric Accounting Study Guide: Cost Accounting<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f1f5f9; \/* slate-100 *\/\n touch-action: pan-y;\n }\n .guide-container {\n min-height: 480px;\n }\n .content-card {\n opacity: 0;\n transform: translateX(20px);\n transition: opacity 0.4s ease-out, transform 0.4s ease-out;\n will-change: opacity, transform;\n }\n .content-card.active {\n opacity: 1;\n transform: translateX(0);\n }\n .progress-bar-inner {\n transition: width 0.3s ease-in-out;\n }\n .topic-button, .quiz-action-button {\n transition: all 0.2s ease-in-out;\n }\n .topic-button:hover, .quiz-action-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2);\n }\n ::selection {\n background: #059669; \/* emerald-600 *\/\n color: #ffffff;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-100 text-slate-800 flex items-center justify-center min-h-screen p-4\">\n\n <div class=\"w-full max-w-4xl mx-auto\">\n <header class=\"text-center mb-6\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-emerald-600\">Matric Accounting Study Guide<\/h1>\n <p class=\"text-slate-500 mt-2\">Your interactive guide to mastering the final exams.<\/p>\n <\/header>\n\n <main id=\"app-container\" class=\"bg-white rounded-xl shadow-lg shadow-emerald-500\/10 p-6 md:p-8 relative\">\n <div class=\"absolute top-4 right-6 text-xs text-slate-400 font-semibold\">created by Wise Excellence<\/div>\n \n \n <div id=\"main-menu\">\n <h2 class=\"text-2xl font-semibold mb-6 text-center text-emerald-700\">Select a Topic to Begin<\/h2>\n <div id=\"topic-grid\" class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\n \n <\/div>\n <\/div>\n\n \n <div id=\"study-guide\" class=\"hidden\">\n <button id=\"back-to-menu\" class=\"mb-4 text-sm font-medium text-emerald-600 hover:text-emerald-500\">← Back to Topics<\/button>\n \n <div id=\"guide-content-wrapper\" class=\"guide-container relative flex items-center justify-center\">\n \n <\/div>\n\n \n <div class=\"mt-6\">\n <div class=\"flex justify-between items-center mb-2\">\n <span id=\"progress-text\" class=\"text-sm text-slate-500\"><\/span>\n <span id=\"topic-title\" class=\"text-sm font-semibold text-slate-600\"><\/span>\n <\/div>\n <div class=\"w-full bg-slate-200 rounded-full h-2.5\">\n <div id=\"progress-bar\" class=\"bg-emerald-500 h-2.5 rounded-full progress-bar-inner\"><\/div>\n <\/div>\n <div id=\"navigation-buttons\" class=\"flex justify-between items-center mt-4\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/main>\n <footer class=\"text-center mt-6\">\n <p class=\"text-xs text-slate-400\">Based on the South African CAPS curriculum guidelines.<\/p>\n <\/footer>\n <\/div>\n \n \n <div id=\"quiz-modal\" class=\"fixed inset-0 bg-black bg-opacity-60 hidden items-center justify-center p-4 backdrop-blur-sm\">\n <div id=\"quiz-content\" class=\"bg-white border border-emerald-500\/20 rounded-lg shadow-2xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto\">\n \n <\/div>\n <\/div>\n\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const studyData = [\n {\n topic: \"Cost Accounting\",\n content: [\n { title: \"Understanding Manufacturing Costs\", text: \"Cost Accounting focuses on the costs involved in manufacturing products. It's essential to classify costs correctly to determine the true cost of production and make informed business decisions.\" },\n { title: \"Classifying Costs\", text: \"The first step is to classify costs. The main categories are: Direct Material (raw materials), Direct Labour (wages of factory workers), and Factory Overheads (all other factory costs like rent, electricity, and supervisor salaries).\" },\n { title: \"The Production Cost Statement\", text: \"This is a key statement you need to master. It summarises the total cost of goods manufactured. The basic structure is: Direct Materials + Direct Labour + Factory Overheads = Total Manufacturing Cost. This is then adjusted for Work-in-Progress (WIP).\" },\n { title: \"Calculating Cost Elements\", text: \"You will be required to calculate the specific amounts for each cost element. This often involves adjusting initial figures for errors, omissions, or incorrect allocations. A common task is allocating shared costs (like rent) between the factory, administration, and sales departments based on a given ratio (e.g., floor space).\" },\n { title: \"Unit Costs and Break-even Point\", text: \"Analyzing costs per unit is crucial for assessing efficiency. You also need to be able to calculate the break-even point \u2013 the number of units a company must sell to cover all its costs. The formula is: Total Fixed Costs \/ (Selling Price per unit - Variable Costs per unit).\" },\n { title: \"Tips for Exam Success\", text: \"Memorise the cost classifications and the format of the Production Cost Statement. Practice allocating shared expenses and be meticulous with your calculations. When commenting on performance, always use the figures you've calculated to support your points, analyzing trends and the impact of management decisions.\" }\n ],\n quiz: [\n { question: \"The salary of a factory supervisor is classified as...\", options: [\"Direct Material Cost\", \"Direct Labour Cost\", \"Factory Overhead Cost\", \"Administration Cost\"], answer: \"Factory Overhead Cost\" },\n { question: \"What is the formula for Prime Cost?\", options: [\"Direct Materials + Factory Overheads\", \"Direct Labour + Factory Overheads\", \"Direct Materials + Direct Labour\", \"Total Manufacturing Cost - WIP\"], answer: \"Direct Materials + Direct Labour\" },\n { question: \"The point at which total revenue equals total costs is known as the...\", options: [\"Profit Margin\", \"Break-even Point\", \"Total Production Cost\", \"Unit Cost\"], answer: \"Break-even Point\" },\n { question: \"If rent for a building is R10,000 and the factory uses 70% of the floor space, what amount is allocated to Factory Overhead Cost?\", options: [\"R10,000\", \"R3,000\", \"R7,000\", \"R0\"], answer: \"R7,000\" },\n { question: \"Which of the following is an example of a Variable Cost?\", options: [\"Factory Rent\", \"Raw Materials\", \"Insurance on Factory Building\", \"Salary of the CEO\"], answer: \"Raw Materials\" }\n ]\n }\n ];\n\n const mainMenu = document.getElementById('main-menu');\n const studyGuide = document.getElementById('study-guide');\n const topicGrid = document.getElementById('topic-grid');\n const guideContainer = document.getElementById('guide-content-wrapper');\n const progressBar = document.getElementById('progress-bar');\n const progressText = document.getElementById('progress-text');\n const topicTitleEl = document.getElementById('topic-title');\n const backToMenuBtn = document.getElementById('back-to-menu');\n const quizModal = document.getElementById('quiz-modal');\n const quizContent = document.getElementById('quiz-content');\n const navigationButtons = document.getElementById('navigation-buttons');\n\n let currentTopicIndex = 0;\n let currentSectionIndex = 0;\n\n function initializeMenu() {\n topicGrid.innerHTML = '';\n studyData.forEach((topicData, index) => {\n const button = document.createElement('button');\n button.className = `topic-button bg-white p-6 rounded-lg shadow-md text-left border border-emerald-500\/20 hover:bg-slate-50 ${studyData.length === 1 ? 'md:col-span-2' : ''}`;\n button.innerHTML = `\n <h3 class=\"text-xl font-semibold text-emerald-600\">${topicData.topic}<\/h3>\n <p class=\"text-slate-500 mt-1 text-sm\">${topicData.content.length} sections<\/p>\n `;\n button.onclick = () => startTopic(index);\n topicGrid.appendChild(button);\n });\n }\n\n function startTopic(topicIndex) {\n currentTopicIndex = topicIndex;\n currentSectionIndex = 0;\n mainMenu.classList.add('hidden');\n studyGuide.classList.remove('hidden');\n renderSection();\n }\n\n function backToMenu() {\n mainMenu.classList.remove('hidden');\n studyGuide.classList.add('hidden');\n }\n\n function renderSection() {\n const section = studyData[currentTopicIndex].content[currentSectionIndex];\n guideContainer.innerHTML = `\n <div class=\"content-card text-center p-4 w-full\">\n <h2 class=\"text-2xl font-bold mb-4 text-emerald-600\">${section.title}<\/h2>\n <div class=\"text-slate-700 leading-relaxed min-h-[250px] text-left\">${section.text}<\/div>\n <\/div>\n `;\n \n setTimeout(() => {\n guideContainer.querySelector('.content-card')?.classList.add('active');\n }, 50);\n\n updateNavigation();\n }\n \n function handleQuiz() {\n quizModal.style.display = 'flex';\n const quizData = studyData[currentTopicIndex].quiz;\n if (quizData && quizData.length > 0) {\n renderQuiz(quizData);\n } else {\n quizContent.innerHTML = `<p class=\"text-yellow-500 text-center\">No quiz available for this topic.<\/p> <button onclick=\"document.getElementById('quiz-modal').style.display='none'\" class=\"mt-4 bg-slate-200 py-2 px-4 rounded\">Close<\/button>`;\n }\n }\n\n function renderQuiz(quizData) {\n let quizHTML = `<h2 class=\"text-2xl font-bold mb-6 text-center text-emerald-600\">Quiz on ${studyData[currentTopicIndex].topic}<\/h2>`;\n quizData.forEach((q, index) => {\n quizHTML += `<div class=\"mb-6\" data-answer=\"${q.answer.replace(\/\"\/g, '"')}\">\n <p class=\"font-semibold mb-3 text-slate-800\">${index + 1}. ${q.question}<\/p>\n <div class=\"space-y-2 text-slate-700\">`;\n q.options.forEach(opt => {\n quizHTML += `<label class=\"flex items-center p-3 rounded-lg border border-slate-200 cursor-pointer hover:bg-slate-100 has-[:checked]:bg-emerald-100 has-[:checked]:border-emerald-400\">\n <input type=\"radio\" name=\"q${index}\" value=\"${opt.replace(\/\"\/g, '"')}\" class=\"mr-3 w-4 h-4 text-emerald-600 bg-slate-100 border-slate-300 focus:ring-emerald-500 focus:ring-2\">\n <span>${opt}<\/span>\n <\/label>`;\n });\n quizHTML += `<\/div><p class=\"result-text mt-2 text-sm font-medium hidden\"><\/p><\/div>`;\n });\n quizHTML += `<div class=\"flex justify-between items-center mt-6\">\n <button id=\"close-quiz-btn\" class=\"bg-slate-500 hover:bg-slate-600 text-white font-bold py-2 px-4 rounded-lg\">Close<\/button>\n <button id=\"submit-quiz-btn\" class=\"bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2 px-4 rounded-lg\">Check Answers<\/button>\n <\/div>`;\n quizContent.innerHTML = quizHTML;\n document.getElementById('submit-quiz-btn').addEventListener('click', () => {\n quizData.forEach((q, index) => {\n const container = quizContent.querySelectorAll('div[data-answer]')[index];\n const selected = container.querySelector(`input[name=\"q${index}\"]:checked`);\n const resultText = container.querySelector('.result-text');\n resultText.classList.remove('hidden');\n if (selected) {\n if (selected.value === q.answer) {\n resultText.textContent = 'Correct!';\n resultText.className = 'result-text mt-2 text-sm font-medium text-green-600';\n } else {\n resultText.textContent = `Incorrect. The correct answer is: ${q.answer}`;\n resultText.className = 'result-text mt-2 text-sm font-medium text-red-600';\n }\n } else {\n resultText.textContent = 'No answer selected.';\n resultText.className = 'result-text mt-2 text-sm font-medium text-yellow-600';\n }\n });\n document.getElementById('submit-quiz-btn').disabled = true;\n });\n document.getElementById('close-quiz-btn').addEventListener('click', () => quizModal.style.display = 'none');\n }\n\n function updateNavigation() {\n navigationButtons.innerHTML = '';\n const topic = studyData[currentTopicIndex];\n const totalSections = topic.content.length;\n const progressPercentage = ((currentSectionIndex + 1) \/ totalSections) * 100;\n progressBar.style.width = `${progressPercentage}%`;\n progressText.textContent = `Section ${currentSectionIndex + 1} of ${totalSections}`;\n topicTitleEl.textContent = topic.topic;\n\n const prevButton = document.createElement('button');\n prevButton.id = 'prev-btn';\n prevButton.className = 'bg-slate-200 hover:bg-slate-300 text-slate-700 font-bold py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed';\n prevButton.textContent = 'Previous';\n prevButton.onclick = navigatePrev;\n prevButton.disabled = currentSectionIndex === 0;\n \n const nextButton = document.createElement('button');\n nextButton.id = 'next-btn';\n \n if (currentSectionIndex === totalSections - 1) {\n nextButton.className = 'quiz-action-button bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-lg transition-colors';\n nextButton.textContent = 'Finish Topic';\n nextButton.onclick = backToMenu;\n const quizButton = document.createElement('button');\n quizButton.id = 'quiz-btn';\n quizButton.className = 'quiz-action-button bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2 px-6 rounded-lg';\n quizButton.textContent = '\u270d\ufe0f Take Quiz';\n quizButton.onclick = handleQuiz;\n navigationButtons.appendChild(prevButton);\n navigationButtons.appendChild(quizButton);\n navigationButtons.appendChild(nextButton);\n } else {\n nextButton.className = 'bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2 px-6 rounded-lg transition-colors';\n nextButton.textContent = 'Next';\n nextButton.onclick = navigateNext;\n navigationButtons.appendChild(prevButton);\n navigationButtons.appendChild(nextButton);\n }\n }\n \n function navigateNext() {\n if (currentSectionIndex < studyData[currentTopicIndex].content.length - 1) {\n currentSectionIndex++;\n renderSection();\n }\n }\n\n function navigatePrev() {\n if (currentSectionIndex > 0) {\n currentSectionIndex--;\n renderSection();\n }\n }\n\n let touchstartX = 0;\n guideContainer.addEventListener('touchstart', e => { touchstartX = e.changedTouches[0].screenX; }, { passive: true });\n guideContainer.addEventListener('touchend', e => {\n let touchendX = e.changedTouches[0].screenX;\n if (touchendX < touchstartX - 50) { \/\/ Swipe Left\n const nextBtn = document.getElementById('next-btn') || document.querySelector('.quiz-action-button[onclick=\"backToMenu()\"]');\n if(nextBtn) nextBtn.click();\n }\n if (touchendX > touchstartX + 50) { \/\/ Swipe Right\n document.getElementById('prev-btn')?.click();\n }\n }, { passive: true });\n \n backToMenuBtn.addEventListener('click', backToMenu);\n document.addEventListener('keydown', (e) => {\n if(studyGuide.classList.contains('hidden') || quizModal.style.display === 'flex') return;\n if (e.key === 'ArrowRight') {\n const nextBtn = document.getElementById('next-btn') || document.querySelector('.quiz-action-button[onclick=\"backToMenu()\"]');\n if(nextBtn) nextBtn.click();\n }\n if (e.key === 'ArrowLeft') document.getElementById('prev-btn')?.click();\n });\n\n \/\/ If there's only one topic, start it automatically\n if (studyData.length === 1) {\n startTopic(0);\n } else {\n initializeMenu();\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<span style=\"text-decoration-style: initial;\">See Other Topic<\/span>s\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[18,23],"tags":[24],"class_list":["post-756","page","type-page","status-publish","hentry","category-grade-12","category-high-school","tag-exam-tool-kit"],"_links":{"self":[{"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/pages\/756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/comments?post=756"}],"version-history":[{"count":4,"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/pages\/756\/revisions"}],"predecessor-version":[{"id":1077,"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/pages\/756\/revisions\/1077"}],"wp:attachment":[{"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/media?parent=756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/categories?post=756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/tags?post=756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":756,"date":"2025-09-12T01:59:48","date_gmt":"2025-09-12T01:59:48","guid":{"rendered":"https:\/\/wiseexcellence.co.za\/high-school\/?page_id=756"},"modified":"2026-02-01T15:41:54","modified_gmt":"2026-02-01T15:41:54","slug":"cost-accounting","status":"publish","type":"page","link":"https:\/\/wiseexcellence.co.za\/high-school\/cost-accounting\/","title":{"rendered":"Cost Accounting"},"content":{"rendered":"\n\n\n\n\n\n \n \n Matric Accounting Study Guide: Cost Accounting<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f1f5f9; \/* slate-100 *\/\n touch-action: pan-y;\n }\n .guide-container {\n min-height: 480px;\n }\n .content-card {\n opacity: 0;\n transform: translateX(20px);\n transition: opacity 0.4s ease-out, transform 0.4s ease-out;\n will-change: opacity, transform;\n }\n .content-card.active {\n opacity: 1;\n transform: translateX(0);\n }\n .progress-bar-inner {\n transition: width 0.3s ease-in-out;\n }\n .topic-button, .quiz-action-button {\n transition: all 0.2s ease-in-out;\n }\n .topic-button:hover, .quiz-action-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 20px rgba(16, 185, 129, 0.2);\n }\n ::selection {\n background: #059669; \/* emerald-600 *\/\n color: #ffffff;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-100 text-slate-800 flex items-center justify-center min-h-screen p-4\">\n\n <div class=\"w-full max-w-4xl mx-auto\">\n <header class=\"text-center mb-6\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-emerald-600\">Matric Accounting Study Guide<\/h1>\n <p class=\"text-slate-500 mt-2\">Your interactive guide to mastering the final exams.<\/p>\n <\/header>\n\n <main id=\"app-container\" class=\"bg-white rounded-xl shadow-lg shadow-emerald-500\/10 p-6 md:p-8 relative\">\n <div class=\"absolute top-4 right-6 text-xs text-slate-400 font-semibold\">created by Wise Excellence<\/div>\n \n \n <div id=\"main-menu\">\n <h2 class=\"text-2xl font-semibold mb-6 text-center text-emerald-700\">Select a Topic to Begin<\/h2>\n <div id=\"topic-grid\" class=\"grid grid-cols-1 md:grid-cols-2 gap-5\">\n \n <\/div>\n <\/div>\n\n \n <div id=\"study-guide\" class=\"hidden\">\n <button id=\"back-to-menu\" class=\"mb-4 text-sm font-medium text-emerald-600 hover:text-emerald-500\">← Back to Topics<\/button>\n \n <div id=\"guide-content-wrapper\" class=\"guide-container relative flex items-center justify-center\">\n \n <\/div>\n\n \n <div class=\"mt-6\">\n <div class=\"flex justify-between items-center mb-2\">\n <span id=\"progress-text\" class=\"text-sm text-slate-500\"><\/span>\n <span id=\"topic-title\" class=\"text-sm font-semibold text-slate-600\"><\/span>\n <\/div>\n <div class=\"w-full bg-slate-200 rounded-full h-2.5\">\n <div id=\"progress-bar\" class=\"bg-emerald-500 h-2.5 rounded-full progress-bar-inner\"><\/div>\n <\/div>\n <div id=\"navigation-buttons\" class=\"flex justify-between items-center mt-4\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/main>\n <footer class=\"text-center mt-6\">\n <p class=\"text-xs text-slate-400\">Based on the South African CAPS curriculum guidelines.<\/p>\n <\/footer>\n <\/div>\n \n \n <div id=\"quiz-modal\" class=\"fixed inset-0 bg-black bg-opacity-60 hidden items-center justify-center p-4 backdrop-blur-sm\">\n <div id=\"quiz-content\" class=\"bg-white border border-emerald-500\/20 rounded-lg shadow-2xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto\">\n \n <\/div>\n <\/div>\n\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const studyData = [\n {\n topic: \"Cost Accounting\",\n content: [\n { title: \"Understanding Manufacturing Costs\", text: \"Cost Accounting focuses on the costs involved in manufacturing products. It's essential to classify costs correctly to determine the true cost of production and make informed business decisions.\" },\n { title: \"Classifying Costs\", text: \"The first step is to classify costs. The main categories are: Direct Material (raw materials), Direct Labour (wages of factory workers), and Factory Overheads (all other factory costs like rent, electricity, and supervisor salaries).\" },\n { title: \"The Production Cost Statement\", text: \"This is a key statement you need to master. It summarises the total cost of goods manufactured. The basic structure is: Direct Materials + Direct Labour + Factory Overheads = Total Manufacturing Cost. This is then adjusted for Work-in-Progress (WIP).\" },\n { title: \"Calculating Cost Elements\", text: \"You will be required to calculate the specific amounts for each cost element. This often involves adjusting initial figures for errors, omissions, or incorrect allocations. A common task is allocating shared costs (like rent) between the factory, administration, and sales departments based on a given ratio (e.g., floor space).\" },\n { title: \"Unit Costs and Break-even Point\", text: \"Analyzing costs per unit is crucial for assessing efficiency. You also need to be able to calculate the break-even point \u2013 the number of units a company must sell to cover all its costs. The formula is: Total Fixed Costs \/ (Selling Price per unit - Variable Costs per unit).\" },\n { title: \"Tips for Exam Success\", text: \"Memorise the cost classifications and the format of the Production Cost Statement. Practice allocating shared expenses and be meticulous with your calculations. When commenting on performance, always use the figures you've calculated to support your points, analyzing trends and the impact of management decisions.\" }\n ],\n quiz: [\n { question: \"The salary of a factory supervisor is classified as...\", options: [\"Direct Material Cost\", \"Direct Labour Cost\", \"Factory Overhead Cost\", \"Administration Cost\"], answer: \"Factory Overhead Cost\" },\n { question: \"What is the formula for Prime Cost?\", options: [\"Direct Materials + Factory Overheads\", \"Direct Labour + Factory Overheads\", \"Direct Materials + Direct Labour\", \"Total Manufacturing Cost - WIP\"], answer: \"Direct Materials + Direct Labour\" },\n { question: \"The point at which total revenue equals total costs is known as the...\", options: [\"Profit Margin\", \"Break-even Point\", \"Total Production Cost\", \"Unit Cost\"], answer: \"Break-even Point\" },\n { question: \"If rent for a building is R10,000 and the factory uses 70% of the floor space, what amount is allocated to Factory Overhead Cost?\", options: [\"R10,000\", \"R3,000\", \"R7,000\", \"R0\"], answer: \"R7,000\" },\n { question: \"Which of the following is an example of a Variable Cost?\", options: [\"Factory Rent\", \"Raw Materials\", \"Insurance on Factory Building\", \"Salary of the CEO\"], answer: \"Raw Materials\" }\n ]\n }\n ];\n\n const mainMenu = document.getElementById('main-menu');\n const studyGuide = document.getElementById('study-guide');\n const topicGrid = document.getElementById('topic-grid');\n const guideContainer = document.getElementById('guide-content-wrapper');\n const progressBar = document.getElementById('progress-bar');\n const progressText = document.getElementById('progress-text');\n const topicTitleEl = document.getElementById('topic-title');\n const backToMenuBtn = document.getElementById('back-to-menu');\n const quizModal = document.getElementById('quiz-modal');\n const quizContent = document.getElementById('quiz-content');\n const navigationButtons = document.getElementById('navigation-buttons');\n\n let currentTopicIndex = 0;\n let currentSectionIndex = 0;\n\n function initializeMenu() {\n topicGrid.innerHTML = '';\n studyData.forEach((topicData, index) => {\n const button = document.createElement('button');\n button.className = `topic-button bg-white p-6 rounded-lg shadow-md text-left border border-emerald-500\/20 hover:bg-slate-50 ${studyData.length === 1 ? 'md:col-span-2' : ''}`;\n button.innerHTML = `\n <h3 class=\"text-xl font-semibold text-emerald-600\">${topicData.topic}<\/h3>\n <p class=\"text-slate-500 mt-1 text-sm\">${topicData.content.length} sections<\/p>\n `;\n button.onclick = () => startTopic(index);\n topicGrid.appendChild(button);\n });\n }\n\n function startTopic(topicIndex) {\n currentTopicIndex = topicIndex;\n currentSectionIndex = 0;\n mainMenu.classList.add('hidden');\n studyGuide.classList.remove('hidden');\n renderSection();\n }\n\n function backToMenu() {\n mainMenu.classList.remove('hidden');\n studyGuide.classList.add('hidden');\n }\n\n function renderSection() {\n const section = studyData[currentTopicIndex].content[currentSectionIndex];\n guideContainer.innerHTML = `\n <div class=\"content-card text-center p-4 w-full\">\n <h2 class=\"text-2xl font-bold mb-4 text-emerald-600\">${section.title}<\/h2>\n <div class=\"text-slate-700 leading-relaxed min-h-[250px] text-left\">${section.text}<\/div>\n <\/div>\n `;\n \n setTimeout(() => {\n guideContainer.querySelector('.content-card')?.classList.add('active');\n }, 50);\n\n updateNavigation();\n }\n \n function handleQuiz() {\n quizModal.style.display = 'flex';\n const quizData = studyData[currentTopicIndex].quiz;\n if (quizData && quizData.length > 0) {\n renderQuiz(quizData);\n } else {\n quizContent.innerHTML = `<p class=\"text-yellow-500 text-center\">No quiz available for this topic.<\/p> <button onclick=\"document.getElementById('quiz-modal').style.display='none'\" class=\"mt-4 bg-slate-200 py-2 px-4 rounded\">Close<\/button>`;\n }\n }\n\n function renderQuiz(quizData) {\n let quizHTML = `<h2 class=\"text-2xl font-bold mb-6 text-center text-emerald-600\">Quiz on ${studyData[currentTopicIndex].topic}<\/h2>`;\n quizData.forEach((q, index) => {\n quizHTML += `<div class=\"mb-6\" data-answer=\"${q.answer.replace(\/\"\/g, '"')}\">\n <p class=\"font-semibold mb-3 text-slate-800\">${index + 1}. ${q.question}<\/p>\n <div class=\"space-y-2 text-slate-700\">`;\n q.options.forEach(opt => {\n quizHTML += `<label class=\"flex items-center p-3 rounded-lg border border-slate-200 cursor-pointer hover:bg-slate-100 has-[:checked]:bg-emerald-100 has-[:checked]:border-emerald-400\">\n <input type=\"radio\" name=\"q${index}\" value=\"${opt.replace(\/\"\/g, '"')}\" class=\"mr-3 w-4 h-4 text-emerald-600 bg-slate-100 border-slate-300 focus:ring-emerald-500 focus:ring-2\">\n <span>${opt}<\/span>\n <\/label>`;\n });\n quizHTML += `<\/div><p class=\"result-text mt-2 text-sm font-medium hidden\"><\/p><\/div>`;\n });\n quizHTML += `<div class=\"flex justify-between items-center mt-6\">\n <button id=\"close-quiz-btn\" class=\"bg-slate-500 hover:bg-slate-600 text-white font-bold py-2 px-4 rounded-lg\">Close<\/button>\n <button id=\"submit-quiz-btn\" class=\"bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2 px-4 rounded-lg\">Check Answers<\/button>\n <\/div>`;\n quizContent.innerHTML = quizHTML;\n document.getElementById('submit-quiz-btn').addEventListener('click', () => {\n quizData.forEach((q, index) => {\n const container = quizContent.querySelectorAll('div[data-answer]')[index];\n const selected = container.querySelector(`input[name=\"q${index}\"]:checked`);\n const resultText = container.querySelector('.result-text');\n resultText.classList.remove('hidden');\n if (selected) {\n if (selected.value === q.answer) {\n resultText.textContent = 'Correct!';\n resultText.className = 'result-text mt-2 text-sm font-medium text-green-600';\n } else {\n resultText.textContent = `Incorrect. The correct answer is: ${q.answer}`;\n resultText.className = 'result-text mt-2 text-sm font-medium text-red-600';\n }\n } else {\n resultText.textContent = 'No answer selected.';\n resultText.className = 'result-text mt-2 text-sm font-medium text-yellow-600';\n }\n });\n document.getElementById('submit-quiz-btn').disabled = true;\n });\n document.getElementById('close-quiz-btn').addEventListener('click', () => quizModal.style.display = 'none');\n }\n\n function updateNavigation() {\n navigationButtons.innerHTML = '';\n const topic = studyData[currentTopicIndex];\n const totalSections = topic.content.length;\n const progressPercentage = ((currentSectionIndex + 1) \/ totalSections) * 100;\n progressBar.style.width = `${progressPercentage}%`;\n progressText.textContent = `Section ${currentSectionIndex + 1} of ${totalSections}`;\n topicTitleEl.textContent = topic.topic;\n\n const prevButton = document.createElement('button');\n prevButton.id = 'prev-btn';\n prevButton.className = 'bg-slate-200 hover:bg-slate-300 text-slate-700 font-bold py-2 px-6 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed';\n prevButton.textContent = 'Previous';\n prevButton.onclick = navigatePrev;\n prevButton.disabled = currentSectionIndex === 0;\n \n const nextButton = document.createElement('button');\n nextButton.id = 'next-btn';\n \n if (currentSectionIndex === totalSections - 1) {\n nextButton.className = 'quiz-action-button bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-lg transition-colors';\n nextButton.textContent = 'Finish Topic';\n nextButton.onclick = backToMenu;\n const quizButton = document.createElement('button');\n quizButton.id = 'quiz-btn';\n quizButton.className = 'quiz-action-button bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2 px-6 rounded-lg';\n quizButton.textContent = '\u270d\ufe0f Take Quiz';\n quizButton.onclick = handleQuiz;\n navigationButtons.appendChild(prevButton);\n navigationButtons.appendChild(quizButton);\n navigationButtons.appendChild(nextButton);\n } else {\n nextButton.className = 'bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-2 px-6 rounded-lg transition-colors';\n nextButton.textContent = 'Next';\n nextButton.onclick = navigateNext;\n navigationButtons.appendChild(prevButton);\n navigationButtons.appendChild(nextButton);\n }\n }\n \n function navigateNext() {\n if (currentSectionIndex < studyData[currentTopicIndex].content.length - 1) {\n currentSectionIndex++;\n renderSection();\n }\n }\n\n function navigatePrev() {\n if (currentSectionIndex > 0) {\n currentSectionIndex--;\n renderSection();\n }\n }\n\n let touchstartX = 0;\n guideContainer.addEventListener('touchstart', e => { touchstartX = e.changedTouches[0].screenX; }, { passive: true });\n guideContainer.addEventListener('touchend', e => {\n let touchendX = e.changedTouches[0].screenX;\n if (touchendX < touchstartX - 50) { \/\/ Swipe Left\n const nextBtn = document.getElementById('next-btn') || document.querySelector('.quiz-action-button[onclick=\"backToMenu()\"]');\n if(nextBtn) nextBtn.click();\n }\n if (touchendX > touchstartX + 50) { \/\/ Swipe Right\n document.getElementById('prev-btn')?.click();\n }\n }, { passive: true });\n \n backToMenuBtn.addEventListener('click', backToMenu);\n document.addEventListener('keydown', (e) => {\n if(studyGuide.classList.contains('hidden') || quizModal.style.display === 'flex') return;\n if (e.key === 'ArrowRight') {\n const nextBtn = document.getElementById('next-btn') || document.querySelector('.quiz-action-button[onclick=\"backToMenu()\"]');\n if(nextBtn) nextBtn.click();\n }\n if (e.key === 'ArrowLeft') document.getElementById('prev-btn')?.click();\n });\n\n \/\/ If there's only one topic, start it automatically\n if (studyData.length === 1) {\n startTopic(0);\n } else {\n initializeMenu();\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n<span style=\"text-decoration-style: initial;\">See Other Topic<\/span>s\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[18,23],"tags":[24],"class_list":["post-756","page","type-page","status-publish","hentry","category-grade-12","category-high-school","tag-exam-tool-kit"],"_links":{"self":[{"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/pages\/756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/comments?post=756"}],"version-history":[{"count":4,"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/pages\/756\/revisions"}],"predecessor-version":[{"id":1077,"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/pages\/756\/revisions\/1077"}],"wp:attachment":[{"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/media?parent=756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/categories?post=756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wiseexcellence.co.za\/high-school\/wp-json\/wp\/v2\/tags?post=756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}