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>