0

necesito crear un formulario dinámico que agregue nuevas preguntas y luego permita agregar respuestas a cada una de esas preguntas. Actualmente este es el código que tengo en funcionamiento, con el cual logro agregar y eliminar respuestas correctamente, pero, lo que no he podido lograr aún es agregar nuevas preguntas para luego agregar respuestas específicamente a las preguntas que uno desee.

Un ejemplo del problema es: Tengo 2 preguntas y deseo agregar nuevas respuestas sólo a la pregunta 2. Lo que sucede es que las nuevas respuestas que agrego pasan a formar parte de la pregunta 1 siempre (no de la pregunta 2 como deseo).

Vista.html

<form action="">
  <div class="form-group row">
  <div class="col-md-8 offset-md-2">
     <input type="text" name="encuesta" id="encuesta" placeholder="Nombre 
         encuesta" class="form-control">
  </div>
  </div>
  <div id="contenedor_todo">
  <div id="pr_0">
     <div class="form-group row">
        <div class="col-md-8 offset-md-2">
           <input type="text" name="preguntas" id="preguntas" 
            placeholder="Pregunta" class="form-control">
        </div>
     </div>
  </div>
  <div id="contenedor_respuestas">
     <div class="tr_0">
        <div class="form-group row">
           <div class="col-md-6 offset-md-2">
              <input type="text" name="respuestas" id="respuestas" 
               class="form-control" placeholder="Respuestas">
           </div>
           <div class="col-md-2">
              <button class="btn btn-light" type="button" 
              onclick="agregarCampo();"><i class="fas fa-plus- 
              circle"></i></button>
              <button class="btn btn-light" type="button" 
              onclick="quitarCampo();"><i class="fas fa-minus- 
              circle"></i></button> 
           </div>
        </div>
     </div>
  </div>
  </div>
  <div class="input-group-prepend text-center offset-lg-5">
  <button class="btn btn-light" type="button" 
  onclick="agregarCampoP()">Agregar pregunta</button>
  <button class="btn btn-light" type="button" onclick="">Quitar 
  pregunta</button> 
  </div>
  </form>

funcion.js

var campos = 0;
var campos2 = 0;

//agregar respuestas
function agregarCampo() {

//Limita a generar 5 respuestas max.
if (campos < 4) {
    campos = campos + 1;

    var NvoCampo = document.createElement("div");
    NvoCampo.id = "tr_" + (campos);
    NvoCampo.innerHTML =

     '<div class="form-group row">' +
        ' <div class="col-md-6 offset-md-2">' +
        '<input type="text"  name="respuestas'+ campos+'" class="form- 
     control"  id="respuestas'+ campos+'" placeholder="Otra respuesta">' +
    '</div>'+
        '</div>';



    var contenedor = document.getElementById("contenedor_respuestas");

    contenedor.appendChild(NvoCampo);
 }
}

//quitar respuestas
function quitarCampo(textbox) {


if (campos > 0) {

    var eliminar = document.getElementById("tr_" + campos);
    var contenedor = document.getElementById("contenedor_respuestas");

    contenedor.removeChild(eliminar);
    campos = campos - 1;


}
}

//agregar preguntas nuevas
function agregarCampoP() {

//Limita a generar 5 preguntas max
if (campos2 < 4) {
    campos2 = campos2 + 1;

    var NvoCampo2 = document.createElement("div");
    NvoCampo2.id = "pr_" + (campos2);
    NvoCampo2.innerHTML =

    '<div class="form-group row">' +
        ' <div class="col-md-6 offset-md-2">' +
        '<input type="text" name="preguntas'+ campos2+'" id="preguntas'+ 
    campos2+'" placeholder="Pregunta" class="form-control">' +
    '</div>'+
        '</div>'+
        '<div class="form-group row">'+

        '<div class="col-md-6 offset-md-2">'+
        '<input type="text" name="respuestas" id="respuestas" class="form- 
         control" placeholder="Respuestas">'+

        '</div>'+
        '<div class="col-md-2">'+
              '<button class="btn btn-light" type="button" 
               onclick="JavaScript:agregarCampo();"><i class="fas fa-plus- 
               circle"></i></button>'+
              '<button class="btn btn-light" type="button" 
               onclick="JavaScript:quitarCampo();"><i class="fas fa-minus- 
          circle"></i></button>'+
        '</div>'+
        '</div>';

    var contenedor2 = document.getElementById("contenedor_todo");

    contenedor2.appendChild(NvoCampo2);
}

1 respuesta 1

0

crea las preguntas por medio de un objeto y las guardas en un arreglo

`

    const preguntas =[];

    class Pregunta{

            constructor(enunciado,respuesta=undefined){
                  this.enunciado=enunciado;
                  this.respuesta=respuesta;
            }
            agregarRespuesta(respuesta){
                   this.respuesta = respuesta;
           }
    }

      function crearPregunta(enunciado,respuesta){
//La respuesta la puedes agregar después
//Simplemente accedes al método agregarRespuesta de el objeto
                     preguntas.push(new Pregunta(enunciado,respuesta));
    }

    funtion obtenerPreguntas(){

    //Recorrer todo el arreglo con las preguntas que se han creado
              for(let i in preguntas){
                       const pregunta = preguntas[i]
                       const enunciado = pregunta.enunciado;
                       const respuesta= pregunta.respuesta;

                       /*Y listo ahora solo agregas una función que te agregue los enunciados y las respuestas al HTML*/

                       //Por ejemplo:

                      //El último argumento es el número de la pregunta 
                      //mostrarPregunta(enunciado,respuesta,i+1)
             }
    }`



//Ejemplo

//Crea la pregunta 
crearPregunta("¿Qué es un byte?");

//Agregas una respuesta
preguntas[0].agregarRespuesta(/*respuesta aquí*/);


//Y por último las imprimes
obtenerPreguntas();

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.