Scribd
Upload
20 views4 pages

Main 2

Uploaded by

nedin88414
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
20 views4 pages

Main 2

Uploaded by

nedin88414
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!-- 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: 100%;
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;
}
.edit-delete button {
background-color: #f44336;
margin-right: 10px;
}
.edit-delete button:hover {
background-color: #d32f2f;
}
.edit-input {
display: none;
}
.button-container {
display: flex;
justify-content: space-between;
align-items: center;
}
</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>

<div class="button-container">
<button type="button" onclick="addSection()">Add Section</button>
<button type="submit">Submit Curriculum</button>
</div>
</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[]">
<option value="lecture">Lecture</option>
<option value="assignment">Assignment</option>
<option value="quiz">Quiz</option>
<option value="video">Video</option>
</select>

<div id="specificContent${sectionCounter}" class="specific-


content">
<!-- Content specific to each option will be added here -->
</div>

<div class="edit-delete">
<button type="button" onclick="removeSection($
{sectionCounter})">Remove Section</button>
</div>
`;
sectionsContainer.appendChild(sectionDiv);
setupContentOptionEvents(sectionCounter);
sectionCounter++;
}

function removeSection(sectionId) {
const sectionDiv = document.getElementById(`section${sectionId}`);
sectionDiv.remove();
}

function setupContentOptionEvents(sectionId) {
const contentOptionSelect = document.getElementById(`contentOption$
{sectionId}`);
const specificContentDiv = document.getElementById(`specificContent$
{sectionId}`);

contentOptionSelect.addEventListener('change', function() {
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[]">
<option value="small_assessment">Small
Assessment</option>
<option value="assignment">Assignment</option>
<option value="practical_task">Practical Task</option>
</select>
<label for="assignmentDescription${sectionId}">Assignment
Description:</label>
<textarea id="assignmentDescription${sectionId}"
name="assignmentDescription[]"></textarea>
<label for="assignmentDuration${sectionId}">Assignment
Duration (in minutes):</label>
<input type="text" id="assignmentDuration${sectionId}"
name="assignmentDuration[]">
`;
} 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 addQuizQuestion(sectionId) {
const quizQuestionsContainer =
document.getElementById(`quizQuestionsContainer${sectionId}`);
const questionCounter = quizQuestionsContainer.childElementCount + 1;
const questionDiv = document.createElement('div');
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>

You might also like