Scribd
Upload
10 views4 pages

Old 6

Uploaded by

jevan74601
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
10 views4 pages

Old 6

Uploaded by

jevan74601
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;
}
@media only screen and (max-width: 600px) {
#courseBuilder {
width: 90%;
}
}
</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 class="section" id="section1">
<label for="sectionName1">Section Name:</label>
<input type="text" id="sectionName1" name="sectionName[]">

<label for="contentOption1">Content Option:</label>


<select id="contentOption1" 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="specificContent1" class="specific-content">


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

<div class="edit-delete">
<button type="button" onclick="addSection()">Add Section</button>
<button type="button" onclick="removeSection(1)">Remove
Section</button>
</div>
</div>

<button type="submit" style="margin-top: 20px;">Submit Curriculum</button>


</form>

</div>

<script>
let sectionCounter = 1;

function addSection() {
sectionCounter++;
const sectionContainer = document.getElementById('courseBuilder');
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="addSection()">Add Section</button>
<button type="button" onclick="removeSection($
{sectionCounter})">Remove Section</button>
</div>
`;
sectionContainer.appendChild(sectionDiv);
setupContentOptionEvents(sectionDiv);
}

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

function setupContentOptionEvents(sectionDiv) {
const contentOptionSelect =
sectionDiv.querySelector(`select[name="contentOption[]"]`);
const specificContentDiv = sectionDiv.querySelector('.specific-content');

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${sectionCounter}">Assignment
Type:</label>
<select id="assignmentType${sectionCounter}"
name="assignmentType[]">
<option value="written">Written</option>
<option value="video">Video</option>
</select>
<label for="assignmentDescription${sectionCounter}">Assignment
Description:</label>
<textarea id="assignmentDescription${sectionCounter}"
name="assignmentDescription[]"></textarea>
<label for="assignmentFile${sectionCounter}">Assignment
File:</label>
<input type="file" id="assignmentFile${sectionCounter}"
name="assignmentFile[]" disabled>
<label for="assignmentDuration${sectionCounter}">Assignment
Duration (in minutes):</label>
<input type="text" id="assignmentDuration${sectionCounter}"
name="assignmentDuration[]">
`;

// Enable/disable file input based on the assignment type


const assignmentTypeSelect =
specificContentDiv.querySelector(`select[name="assignmentType[]"]`);
const assignmentFileInput =
specificContentDiv.querySelector(`input[name="assignmentFile[]"]`);
assignmentTypeSelect.addEventListener('change', function() {
assignmentFileInput.disabled = assignmentTypeSelect.value !==
'video';
});
} else if (selectedOption === 'quiz') {
// Add quiz specific inputs
specificContentDiv.innerHTML = `
<label for="quizQuestion${sectionCounter}">Quiz
Question:</label>
<input type="text" id="quizQuestion${sectionCounter}"
name="quizQuestion[]">
<label for="quizOption1${sectionCounter}">Option 1:</label>
<input type="text" id="quizOption1${sectionCounter}"
name="quizOption1[]">
<label for="quizOption2${sectionCounter}">Option 2:</label>
<input type="text" id="quizOption2${sectionCounter}"
name="quizOption2[]">
<label for="quizOption3${sectionCounter}">Option 3:</label>
<input type="text" id="quizOption3${sectionCounter}"
name="quizOption3[]">
<label for="quizOption4${sectionCounter}">Option 4:</label>
<input type="text" id="quizOption4${sectionCounter}"
name="quizOption4[]">
`;
} else if (selectedOption === 'video') {
// Add video specific inputs
specificContentDiv.innerHTML = `
<label for="videoLink${sectionCounter}">Video Link:</label>
<input type="text" id="videoLink${sectionCounter}"
name="videoLink[]">
<label for="videoFile${sectionCounter}">Video File:</label>
<input type="file" id="videoFile${sectionCounter}"
name="videoFile[]">
`;
}
});
}
</script>

</body>
</html>

You might also like