servicio_social_front/components/responsable/cuestionario.vue

<template>
    <div class="container">
        <div class="section">
            <h1 class="title is-3">Estimad(a) responsable de programa de servicio social: </h1>
            <p>Te solicitamos llenar cuidadosamente los campos solicitados a continuación para poder validar el término del servicio social de nuestro alumno(a)</p>
        </div>

        <section class="section pt-0">
            <h3 class="subtitle is-5">Mencione 5 actividades desempeñadas por el alumno: </h3>
            <b-input class="my-4" placeholder="1.-" v-model="actividades.actividad1" maxlength="800"></b-input>
            <b-input class="my-4" placeholder="2.-" v-model="actividades.actividad2" maxlength="800"></b-input>
            <b-input class="my-4" placeholder="3.-" v-model="actividades.actividad3" maxlength="800"></b-input>
            <b-input class="my-4" placeholder="4.-" v-model="actividades.actividad4" maxlength="800"></b-input>
            <b-input class="mt-3" placeholder="5.-" v-model="actividades.actividad5" maxlength="800"></b-input>
        </section>

        <section class="section pt-0">
            <p>Con el objetivo de retroalimentar académica de nuestros alumnos de la licenciatura le solicitamos que responda a las siguientes <br>
            preguntas de acuerdo a la siguiente escala: </p>

            <div class="level mt-5">
                <p class="level-item has-text-centered">4)Exelente</p> <p class="level-item has-text-around">3)Bueno</p> <p class="level-item has-text-around">2)Regular</p> <p class="level-item has-text-around">1)Deficiente</p>
            </div>
        </section>

        <section class="section pt-0">
            <div class="columns">
                <p class="column is- 9">1. Conocimiento teóricos para las funciones encomendadas</p>
                <b-field class="column is-2">
                    <b-select placeholder="Seleccionar" v-model="calificaciones.calificacion1">
                        <option value=1>1</option>
                        <option value=2>2</option>
                        <option value=3>3</option>
                        <option value=4>4</option>
                    </b-select>
                </b-field>
            </div>
            <br>

            <div class="columns">
                <p class="column is- 9">2. Conocimientos técnicos para las funciones encomendadas</p>
                <b-field class="column is-2">
                    <b-select placeholder="Seleccionar" calificaciones.calificacion2>
                        <option value=1>1</option>
                        <option value=2>2</option>
                        <option value=3>3</option>
                        <option value=4>4</option>
                    </b-select>
                </b-field>
            </div>
            <br>

            <div class="columns">
                <p class="column is- 9">3. Iniciativa para la implementación de mejoras en la empresa</p>
                <b-field class="column is-2">
                    <b-select placeholder="Seleccionar" calificaciones.calificacion3>
                        <option value=1>1</option>
                        <option value=2>2</option>
                        <option value=3>3</option>
                        <option value=4>4</option>
                    </b-select>
                </b-field>
            </div>
            <br>

            <div class="columns">
                <p class="column is- 9">4. Puntualidad en la entrega de los trabajos de las tareas encomendadas</p>
                <b-field class="column is-2">
                    <b-select placeholder="Seleccionar" calificaciones.calificacion4>
                        <option value=1>1</option>
                        <option value=2>2</option>
                        <option value=3>3</option>
                        <option value=4>4</option>
                    </b-select>
                </b-field>
            </div>
            <br>

            <div class="columns">
                <p class="column is- 9">5. Desempeño general de sus funciones</p>
                <b-field class="column is-2">
                    <b-select placeholder="Seleccionar" calificaciones.calificacion5>
                        <option value=1>1</option>
                        <option value=2>2</option>
                        <option value=3>3</option>
                        <option value=4>4</option>
                    </b-select>
                </b-field>
            </div>

            <p class="my-5">6. De acuerdo a lo observado ¿cuáles considera que son las cualidades de nuestros alumnos de esta licenciatura?</p>
            <b-input placeholder="Respuesta" maxlength="800" calificaciones.calificacion6></b-input>
            <p class="my-5">7. De acuerdo a lo observado ¿cuáles considera que son los aspectos a mejorar en la formación de nuestros alumnos de esta licenciatura?</p>
            <b-input placeholder="Respuesta" maxlength="800" calificaciones.calificacion7></b-input>

            <b-button
            class="border-info my-5"
            type="is-info"
            tag="router-link"
            to="/responsable"
            >Regresar</b-button>

            <b-button
            class="border-info my-5"
            type="is-info"
            tag="router-link"
            to="/responsable"
            >Enviar</b-button>
        </section>

    </div>
</template>

<script>
export default {
  data () {
    return {
      actividades: {
        actividad1: '',
        actividad2: '',
        actividad3: '',
        actividad4: '',
        actividad5: ''
      },
      calificaciones: {
        calificacion1: '',
        calificacion2: '',
        calificacion3: '',
        calificacion4: '',
        calificacion5: '',
        calificacion6: '',
        calificacion7: ''

      }
    }
  },
  methods: {
    imprime () {
      console.log(this.actividad1)
    }
  }
}
</script>

<style>

</style>