<!-- curriculum_builder.
html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Course Curriculum Builder</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
#courseBuilder {
max-width: 800px;
margin: auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.section {
margin-top: 20px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px;
}
input, select, textarea {
width: calc(100% - 16px);
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #4caf50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div id="courseBuilder">
<h2 style="text-align: center;">Course Curriculum Builder</h2>
<form id="curriculumForm" action="display_data.php" method="post">
<div id="sectionsContainer">
<!-- Sections will be dynamically added here -->
</div>
<button type="button" onclick="addSection()">Add Section</button>
<button type="submit">Submit Curriculum</button>
</form>
<script>
let sectionCounter = 1;
function addSection() {
const sectionsContainer = document.getElementById('sectionsContainer');
const sectionDiv = document.createElement('div');
sectionDiv.className = 'section';
sectionDiv.id = `section${sectionCounter}`;
sectionDiv.innerHTML = `
<label for="sectionName${sectionCounter}">Section Name:</label>
<input type="text" id="sectionName${sectionCounter}"
name="sectionName[]">
<label for="contentOption${sectionCounter}">Content Option:</label>
<select id="contentOption${sectionCounter}" name="contentOption[]"
onchange="updateSpecificContent(${sectionCounter})">
<option value="lecture">Lecture</option>
<option value="assignment">Assignment</option>
<option value="quiz">Quiz</option>
<option value="video">Video</option>
</select>
<div class="specific-content" id="specificContent$
{sectionCounter}">
<!-- Content specific to each option will be added here -->
</div>
`;
sectionsContainer.appendChild(sectionDiv);
sectionCounter++;
}
function updateSpecificContent(sectionId) {
const contentOptionSelect = document.getElementById(`contentOption$
{sectionId}`);
const specificContentDiv = document.getElementById(`specificContent$
{sectionId}`);
const selectedOption = contentOptionSelect.value;
specificContentDiv.innerHTML = ''; // Clear previous content
if (selectedOption === 'assignment') {
// Add assignment specific inputs
specificContentDiv.innerHTML = `
<label for="assignmentType${sectionId}">Assignment
Type:</label>
<select id="assignmentType${sectionId}" name="assignmentType[]"
onchange="updateAssignmentDetails(${sectionId})">
<option value="small_assessment">Small Assessment</option>
<option value="assignment">Assignment</option>
<option value="practical_task">Practical Task</option>
</select>
<div id="assignmentDetails${sectionId}"></div>
`;
} else if (selectedOption === 'quiz') {
// Add quiz specific inputs
specificContentDiv.innerHTML = `
<label for="quizType${sectionId}">Quiz Type:</label>
<select id="quizType${sectionId}" name="quizType[]">
<option value="quick_quiz">Quick Quiz</option>
<option value="quiz">Quiz</option>
</select>
<div id="quizQuestionsContainer${sectionId}" class="quiz-
questions-container"></div>
<button type="button" onclick="addQuizQuestion($
{sectionId})">Add Question</button>
`;
}
}
function updateAssignmentDetails(sectionId) {
const assignmentTypeSelect = document.getElementById(`assignmentType$
{sectionId}`);
const assignmentDetailsDiv =
document.getElementById(`assignmentDetails${sectionId}`);
const selectedAssignmentType = assignmentTypeSelect.value;
assignmentDetailsDiv.innerHTML = ''; // Clear previous content
if (selectedAssignmentType === 'small_assessment') {
assignmentDetailsDiv.innerHTML = `
<label for="smallAssessmentDescription${sectionId}">Small
Assessment Description:</label>
<textarea id="smallAssessmentDescription${sectionId}"
name="smallAssessmentDescription[]"></textarea>
`;
} else if (selectedAssignmentType === 'assignment') {
assignmentDetailsDiv.innerHTML = `
<label for="assignmentFile${sectionId}">Upload Assignment
File:</label>
<input type="file" id="assignmentFile${sectionId}"
name="assignmentFile[]">
`;
} else if (selectedAssignmentType === 'practical_task') {
assignmentDetailsDiv.innerHTML = `
<label for="practicalTaskDetails${sectionId}">Practical Task
Details:</label>
<input type="text" id="practicalTaskDetails${sectionId}"
name="practicalTaskDetails[]">
`;
}
}
function addQuizQuestion(sectionId) {
const quizQuestionsContainer =
document.getElementById(`quizQuestionsContainer${sectionId}`);
const questionCounter = quizQuestionsContainer.childElementCount + 1;
const questionDiv = document.createElement('div');
questionDiv.className = 'quiz-question-container';
questionDiv.innerHTML = `
<label for="quizQuestion${sectionId}_${questionCounter}">Question $
{questionCounter}:</label>
<input type="text" id="quizQuestion${sectionId}_${questionCounter}"
name="quizQuestion_${sectionId}[]">
<label for="quizOption1${sectionId}_${questionCounter}">Option
1:</label>
<input type="text" id="quizOption1${sectionId}_${questionCounter}"
name="quizOption1_${sectionId}[]">
<label for="quizOption2${sectionId}_${questionCounter}">Option
2:</label>
<input type="text" id="quizOption2${sectionId}_${questionCounter}"
name="quizOption2_${sectionId}[]">
<label for="quizOption3${sectionId}_${questionCounter}">Option
3:</label>
<input type="text" id="quizOption3${sectionId}_${questionCounter}"
name="quizOption3_${sectionId}[]">
<label for="quizOption4${sectionId}_${questionCounter}">Option
4:</label>
<input type="text" id="quizOption4${sectionId}_${questionCounter}"
name="quizOption4_${sectionId}[]">
`;
quizQuestionsContainer.appendChild(questionDiv);
}
</script>
</body>
</html>
