0

Lo que trato de hacer es un sistema de encuestas el cual en las tipos de pregunta, tambien me de la opcion de poner el tipo de pregunta matriz introducir la descripción de la imagen aquí

Asi como en la imagen el cual me de la opcion de editar el encabezado y asi mismo las respuestas osea donde dice Alumno , y tambien que sea tipo radio o checkbox llevo avanzado el codigo les comparte en donde tengo todo de acuerdo a este apartado.`

<div id="radio_opt_clone_M" style="display: none">
    <div class="callout callout-info">
        <!--<table width="100%" class="table">
            <colgroup>
                <col width="10%">
                <col width="80%">
                <col width="10%">
            </colgroup>
            <thead>
                <tr class="">
                    <th class="text-center"></th>

                    <th class="text-center">
                        <label for="" class="control-label">Label</label>
                    </th>
                    <th class="text-center"></th>
                </tr>
            </thead>
            <tbody>                    
                    <td class="Matrix-text">
                        
                <td class="Matrix-text">
                        <input type="text" class="form-control form-control-sm check_inp" name="label[]">
                    </td>
                    <td class="Matrix-text">
                        <div class="icheck-primary d-inline" data-count='1'>
                            <input type="radio" id="radioPrimary1" name="radio">
                            <label for="radioPrimary1">
                            </label>
                        </div>
                    </td></td>
                </td>

                <tr class="Matrix-text2">

                    <td class="Matrix-text2">
                        <div class="icheck-primary d-inline" data-count='1'>
                            <input type="radio" id="radioPrimary1" name="radio">
                        </div>
                    </td>
                </tr>
            

            </tbody>
        </table>-->
        <div class="row">
            <div class="col-md-12">
                <p>Tipo de opcion</p>
                <select class="form-control">
                    <option value="0">radio</option>
                    <option value="1">check</option>
                </select>
                
                <div>
                    <label for="">Numero de columnas</label>
                    <input type="text" id="ip_num_colum" class="form-control" >
                </div>
                <div id="div_columnas">
                        <div class="row">
                            <div class="col-md-2">
                                <input type="text" class="form-control" placeholder="Columna 1">
                            </div>
                            <div class="col-md-2"></div>
                            <div class="col-md-2"></div>

                            <div class="col-md-2"></div>

                            <div class="col-md-2"></div>

                        </div>
                </div>
                <div>
            </div>
        </div>
        <div class="row">
            
            <div class="col-sm-12 text-center">
                <button class="btn btn-sm btn-flat btn-default" type="button" onclick="crear_inputs()"><i
                        class="fa fa-plus"></i> Add Columnas</button>
            </div>
        </div>
    </div>
</div>

`

Aqui añado el div donde va ubicado la opcion, aclaro que estoy trabajando con php, css, html, javascript(utilizo para las funciones de las opciones), aparte de eso nesesito que las opciones se guarden en un JSON.`

let obj_columnas=[];

function crear_inputs(){
    let num_column = $("#ip_num_colum").val();
    if(obj_columnas.length==0){

        obj_columnas.push({num_column});
    }else{
        obj_columnas.forEach(element => {
            if(element.obj_columnas!=num_column){
                element.obj_columnas=num_column               
            }
        });
    }
    // JSON object
    console.log(obj_columnas);
    $("#div_columnas").html(obj_columnas);
}

`

1 respuesta 1

0

mira este código es mas fácil

el html

<div class="cuadrado">
        <div class="elemeto">comienzo del cuadrado</div>
        <div class="elemeto"></div>
        <div class="elemeto"></div>
        <div class="elemeto"></div>
        <div class="elemeto"></div>
        <div class="elemeto"></div>
        <div class="elemeto"></div>
        <div class="elemeto"></div>
        <div class="elemeto">por la mitad</div>
        <div class="elemeto"></div>
        <div class="elemeto"></div>
        <div class="elemeto"></div>
        <div class="elemeto"></div>
        <div class="elemeto"></div>
        <div class="elemeto"></div>
        <div class="elemeto">agrega mas si quieres</div>
    </div>

el css

.cuadrado{
    width: 600px;
    height: 600px;
    background: green;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(7, 1fr);
    align-items: center;
    justify-items: center;
}
.elemeto{
    background-color: white;
    width: 90%;
    height: 90%;
}

el resultado: introducir la descripción de la imagen aquí

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.