HTML - ayuda con esto

 
Vista:
sin imagen de perfil

ayuda con esto

Publicado por santiago (2 intervenciones) el 29/10/2022 09:50:14
Editor de exámenes, con preguntas de selección múltiple y de única respuesta.

Se deben poder crear tantas preguntas como quiera el usuario. Cada pregunta tendrá la misma esta estructura.

Pregunta: Se debe poder ingresar un texto definiendo la pregunta.
Opciones: Cada pregunta debe tener de tres a cinco opciones, las cuales deben tener texto y un radio button. Se debe tener en cuenta que dos o mas opciones de una misma pregunta no pueden ser marcados.
Se debe poder eliminar y editar preguntas y opciones después de creadas.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil

ayuda con esto

Publicado por eddy619 (5 intervenciones) el 29/12/2022 20:06:36
1
HTML


<div id="exam-editor">
<h1>Exam Editor</h1>
<button id="add-question-btn">Add Question</button>
<form id="exam-form"></form>
</div>


1
CSS

#exam-editor {
width: 500px;
margin: 0 auto;
text-align: center;
}

#exam-form {
margin-top: 20px;
}

.question {
margin-top: 20px;
}

.question-text {
font-weight: bold;
margin-bottom: 10px;
}

.options {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.option {
margin: 0 10px 10px 0;
}

.option input[type="radio"] {
margin-right: 10px;
}

.edit-question-btn, .delete-question-btn {
margin-top: 10px;
cursor: pointer;
}


1
JS

const examEditor = document.getElementById('exam-editor');
const examForm = document.getElementById('exam-form');
const addQuestionBtn = document.getElementById('add-question-btn');

let questionId = 0;

addQuestionBtn.addEventListener('click', () => {
// Create a new question element
const question = document.createElement('div');
question.classList.add('question');
question.id = `question-${questionId}`;

// Create a textarea for the question text
const questionText = document.createElement('textarea');
questionText.classList.add('question-text');
questionText.placeholder = 'Enter question text';
question.appendChild(questionText);

// Create a container for the options
const options = document.createElement('div');
options.classList.add('options');
question.appendChild(options);

// Add three options by default
for (let i = 0; i < 3; i++) {
const optionId = `${questionId}-${i}`;
const option = createOption(optionId);
options.appendChild(option);
}

// Create a button to add more options
const addOptionBtn = document.createElement('button');
addOptionBtn.textContent = 'Add Option';
addOptionBtn.addEventListener('click', () => {
const optionId = `${questionId}-${options.children.length}`;
const option = createOption(optionId);
options.appendChild(option);
});
question.appendChild(addOptionBtn);

// Create buttons to edit and delete the question
const editQuestionBtn = document.createElement('button');
editQuestionBtn.textContent = 'Edit';
editQuestionBtn.classList.add('edit-question-btn');
edit
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar