diff --git a/components/alumno/DataAlumno.vue b/components/alumno/DataAlumno.vue
index 526dfcf..9f00049 100644
--- a/components/alumno/DataAlumno.vue
+++ b/components/alumno/DataAlumno.vue
@@ -201,207 +201,207 @@
 </template>
 
 <script>
-import "buefy/dist/buefy.css";
-import moment from "moment";
-import axios from "axios";
+import 'buefy/dist/buefy.css'
+import moment from 'moment'
+import axios from 'axios'
 
 export default {
-  data() {
+  data () {
     return {
-      activeStep: "",
+      activeStep: '',
       isFullPage: true,
       file: [],
       nacimiento: [],
-      telefono: "",
-      direccion: "",
+      telefono: '',
+      direccion: '',
 
       alumno: {
-        carrera: "",
-        nombre: "",
-        cuenta: "",
-        correo: "",
-        direccion: "",
-        nacimiento: "",
-        telefono: "",
-        idCuestionario: "",
-        informeGlobal: "",
-        idAlumno: "",
-        idCarrera: "",
-        idServicio: "",
+        carrera: '',
+        nombre: '',
+        cuenta: '',
+        correo: '',
+        direccion: '',
+        nacimiento: '',
+        telefono: '',
+        idCuestionario: '',
+        informeGlobal: '',
+        idAlumno: '',
+        idCarrera: '',
+        idServicio: '',
         inicio: [],
-        fin: [],
+        fin: []
       },
       programa: {
-        programa: "",
-        institucion: "",
-        dependencia: "",
-        clave: "",
-        acatlan: "",
-        programaInterno: "",
-        profesor: "",
+        programa: '',
+        institucion: '',
+        dependencia: '',
+        clave: '',
+        acatlan: '',
+        programaInterno: '',
+        profesor: ''
       },
       mensajes: [
-        { status: 0, mensaje: "" },
-        { status: 1, mensaje: "" },
+        { status: 0, mensaje: '' },
+        { status: 1, mensaje: '' },
         {
           status: 2,
           mensaje:
-            "Te informamos que el Área de Registro y Control de Servicio Social ha validado tu solicitud de registro de servicio social por lo que el siguiente trámite lo realizarás hasta que concluyas 480 horas en un periodo de mínimo 6 meses y obtengas tu carta de término por parte de la institución, quien se encargará de subir dicho archivo a este sistema, además de responder un cuestionario sobre tu desempeño. A su vez, deberás responder el siguiente cuestionario de evaluación del programa de servicio social en donde participaste y enviar el informe global de actividades elaborado por ti, con firma y sello de visto bueno de tu jefe inmediato. En cuanto el Área de Registro y Control de Servicio Social valide tu solicitud, podrás revisar las indicaciones del siguiente paso en el panel llamado “Liberación” Cualquier duda puedes acudir al área de Registro y Control de Servicio Social en COESI de lunes a viernes de 10:00 a 14:00 hrs. y de 16:00 a 20:00 hrs. o bien, comunicarte al 5623 1686 o al correo registross@acatlan.unam.mx",
+            'Te informamos que el Área de Registro y Control de Servicio Social ha validado tu solicitud de registro de servicio social por lo que el siguiente trámite lo realizarás hasta que concluyas 480 horas en un periodo de mínimo 6 meses y obtengas tu carta de término por parte de la institución, quien se encargará de subir dicho archivo a este sistema, además de responder un cuestionario sobre tu desempeño. A su vez, deberás responder el siguiente cuestionario de evaluación del programa de servicio social en donde participaste y enviar el informe global de actividades elaborado por ti, con firma y sello de visto bueno de tu jefe inmediato. En cuanto el Área de Registro y Control de Servicio Social valide tu solicitud, podrás revisar las indicaciones del siguiente paso en el panel llamado “Liberación” Cualquier duda puedes acudir al área de Registro y Control de Servicio Social en COESI de lunes a viernes de 10:00 a 14:00 hrs. y de 16:00 a 20:00 hrs. o bien, comunicarte al 5623 1686 o al correo registross@acatlan.unam.mx'
         },
-        { status: 3, mensaje: "" },
+        { status: 3, mensaje: '' },
         {
           status: 4,
           mensaje:
-            "Espera a que tus documentos sean validados por el Departamento de Servicio Social y Bolsa de Trabajo",
+            'Espera a que tus documentos sean validados por el Departamento de Servicio Social y Bolsa de Trabajo'
         },
         {
           status: 5,
           mensaje:
-            "Te confirmamos que has concluido con los trámites necesarios para la liberación de tu servicio social por lo que ahora sólo queda esperar a que en máximo 15 días hábiles se te notifique por correo electrónico a partir de cuándo puedes recoger la copia de tu carta de liberación en las ventanillas del Área de Registro y Control de Servicio Social. Cualquier duda puedes acudir al área de Registro y Control de Servicio Social en COESI de lunes a viernes de 10:00 a 13:00 hrs. y de 16:00 a 19:00 hrs. o bien, comunicarte al 5623 1686 o al correo registross@apolo.acatlan.unam.mx",
+            'Te confirmamos que has concluido con los trámites necesarios para la liberación de tu servicio social por lo que ahora sólo queda esperar a que en máximo 15 días hábiles se te notifique por correo electrónico a partir de cuándo puedes recoger la copia de tu carta de liberación en las ventanillas del Área de Registro y Control de Servicio Social. Cualquier duda puedes acudir al área de Registro y Control de Servicio Social en COESI de lunes a viernes de 10:00 a 13:00 hrs. y de 16:00 a 19:00 hrs. o bien, comunicarte al 5623 1686 o al correo registross@apolo.acatlan.unam.mx'
         },
-        { status: 6, mensaje: "" },
-        { status: 7, mensaje: "" },
-        { status: 8, mensaje: "" },
-        { status: 9, mensaje: "" },
-      ],
-    };
+        { status: 6, mensaje: '' },
+        { status: 7, mensaje: '' },
+        { status: 8, mensaje: '' },
+        { status: 9, mensaje: '' }
+      ]
+    }
   },
   methods: {
-    enviarRegistro() {
+    enviarRegistro () {
       const loadingComponent = this.$buefy.loading.open({
-        container: this.isFullPage ? null : this.$refs.element.$el,
-      });
+        container: this.isFullPage ? null : this.$refs.element.$el
+      })
 
       const data = {
         idServicio: this.alumno.idServicio,
-        fechaNacimiento: moment(this.alumno.nacimiento),
-        direccion: this.alumno.direccion,
-        telefono: this.alumno.telefono,
-      };
+        direccion: this.direccion,
+        telefono: this.telefono,
+        fechaNacimiento: moment(this.nacimiento)
+      }
 
       axios
         .put(`${process.env.api}/servicio/registro_validado`, data)
         .then((res) => {
-          loadingComponent.close();
+          loadingComponent.close()
           this.$buefy.dialog.alert({
-            title: "Success",
-            message: "Se enviaron los datos correctamente",
-            type: "is-success",
+            title: 'Success',
+            message: 'Se enviaron los datos correctamente',
+            type: 'is-success',
             hasIcon: true,
-            icon: "checkbox-marked-circle",
-            iconPack: "mdi",
-            ariaRole: "alertdialog",
-            ariaModal: true,
-          });
+            icon: 'checkbox-marked-circle',
+            iconPack: 'mdi',
+            ariaRole: 'alertdialog',
+            ariaModal: true
+          })
 
-          this.reset();
+          this.reset()
         })
         .catch((error) => {
-          loadingComponent.close();
+          loadingComponent.close()
           this.$buefy.dialog.alert({
-            title: "Error",
+            title: 'Error',
             message: error.response.data.message,
-            type: "is-danger",
+            type: 'is-danger',
             hasIcon: true,
-            icon: "alert-circle",
-            iconPack: "mdi",
-            ariaRole: "alertdialog",
-            ariaModal: true,
-          });
-        });
+            icon: 'alert-circle',
+            iconPack: 'mdi',
+            ariaRole: 'alertdialog',
+            ariaModal: true
+          })
+        })
     },
-    enviarInforme() {
+    enviarInforme () {
       const loadingComponent = this.$buefy.loading.open({
-        container: this.isFullPage ? null : this.$refs.element.$el,
-      });
+        container: this.isFullPage ? null : this.$refs.element.$el
+      })
       const data = {
-        idServicio: this.alumno.idServicio,
-      };
-      const formData = new FormData();
-      console.log(data);
-      formData.append("data", JSON.stringify(data));
-      formData.append("informeGlobal", this.file);
+        idServicio: this.alumno.idServicio
+      }
+      const formData = new FormData()
+      console.log(data)
+      formData.append('data', JSON.stringify(data))
+      formData.append('informeGlobal', this.file)
 
       axios
         .put(`${process.env.api}/servicio/informe_global`, formData, {
           headers: {
-            "Content-Type": "multipart/form-data",
-          },
+            'Content-Type': 'multipart/form-data'
+          }
         })
         .then((res) => {
-          loadingComponent.close();
+          loadingComponent.close()
           this.$buefy.dialog.alert({
-            title: "Success",
-            message: "Se enviaron los datos correctamente",
-            type: "is-success",
+            title: 'Success',
+            message: 'Se enviaron los datos correctamente',
+            type: 'is-success',
             hasIcon: true,
-            icon: "checkbox-marked-circle",
-            iconPack: "mdi",
-            ariaRole: "alertdialog",
-            ariaModal: true,
-          });
+            icon: 'checkbox-marked-circle',
+            iconPack: 'mdi',
+            ariaRole: 'alertdialog',
+            ariaModal: true
+          })
 
-          this.reset();
+          this.reset()
         })
         .catch((error) => {
-          loadingComponent.close();
+          loadingComponent.close()
           this.$buefy.dialog.alert({
-            title: "Error",
+            title: 'Error',
             message: error.response.data.message,
-            type: "is-danger",
+            type: 'is-danger',
             hasIcon: true,
-            icon: "alert-circle",
-            iconPack: "mdi",
-            ariaRole: "alertdialog",
-            ariaModal: true,
-          });
-        });
-    },
+            icon: 'alert-circle',
+            iconPack: 'mdi',
+            ariaRole: 'alertdialog',
+            ariaModal: true
+          })
+        })
+    }
   },
   computed: {
-    steps() {
-      const steps = [...this.baseSteps];
-      return steps;
-    },
+    steps () {
+      const steps = [...this.baseSteps]
+      return steps
+    }
   },
-  created() {
+  created () {
     axios
       .get(`${process.env.api}/servicio/alumno`, {
         params: {
-          idUsuario: localStorage.getItem("idUsuario"),
-        },
+          idUsuario: localStorage.getItem('idUsuario')
+        }
       })
       .then((resp) => {
-        console.log(resp.data);
-        this.activeStep = resp.data.Status.idStatus - 1;
+        console.log(resp.data)
+        this.activeStep = resp.data.Status.idStatus - 1
 
-        this.programa.programa = resp.data.Programa.programa;
-        this.programa.dependencia = resp.data.Programa.dependencia;
-        this.programa.institucion = resp.data.Programa.institucion;
-        this.programa.clave = resp.data.Programa.clavePrograma;
-        this.programa.profesor = resp.data.profesor;
-        this.programa.acatlan = resp.data.Programa.acatlan;
-        this.programa.programaInterno = resp.data.programaInterno;
+        this.programa.programa = resp.data.Programa.programa
+        this.programa.dependencia = resp.data.Programa.dependencia
+        this.programa.institucion = resp.data.Programa.institucion
+        this.programa.clave = resp.data.Programa.clavePrograma
+        this.programa.profesor = resp.data.profesor
+        this.programa.acatlan = resp.data.Programa.acatlan
+        this.programa.programaInterno = resp.data.programaInterno
 
-        this.alumno.carrera = resp.data.Carrera.carrera;
-        this.alumno.idCarrera = resp.data.Carrera.idCarrera;
-        this.alumno.correo = resp.data.correo;
-        this.alumno.inicio = resp.data.fechaInicio;
-        this.alumno.fin = resp.data.fechaFin;
-        this.alumno.direccion = resp.data.direccion;
-        this.alumno.nacimiento = resp.data.fechaNacimiento;
-        this.alumno.telefono = resp.data.telefono;
-        this.alumno.idServicio = resp.data.idServicio;
-        this.alumno.idCuestionario = resp.data.idCuestionarioAlumno;
-        this.alumno.informeGlobal = resp.data.informeGlobal;
-        this.alumno.nombre = localStorage.getItem("nombre");
-        this.alumno.cuenta = localStorage.getItem("usuario");
+        this.alumno.carrera = resp.data.Carrera.carrera
+        this.alumno.idCarrera = resp.data.Carrera.idCarrera
+        this.alumno.correo = resp.data.correo
+        this.alumno.inicio = resp.data.fechaInicio
+        this.alumno.fin = resp.data.fechaFin
+        this.alumno.direccion = resp.data.direccion
+        this.alumno.nacimiento = resp.data.fechaNacimiento
+        this.alumno.telefono = resp.data.telefono
+        this.alumno.idServicio = resp.data.idServicio
+        this.alumno.idCuestionario = resp.data.idCuestionarioAlumno
+        this.alumno.informeGlobal = resp.data.informeGlobal
+        this.alumno.nombre = localStorage.getItem('nombre')
+        this.alumno.cuenta = localStorage.getItem('usuario')
       })
       .catch((error) => {
-        console.log(error.message);
-      });
-  },
-};
+        console.log(error.message)
+      })
+  }
+}
 </script>
 
 <style scoped>
diff --git a/pages/alumno/cuestionario/index.vue b/pages/alumno/cuestionario/index.vue
index 006d05e..c4a7228 100644
--- a/pages/alumno/cuestionario/index.vue
+++ b/pages/alumno/cuestionario/index.vue
@@ -1,54 +1,682 @@
 <template>
-  <section class="container">
-    <p class="is-size-2">Formulario</p>
-    <br>
-    <b-field label="Nombre: ">
-      <b-input
-        type="text"
-        v-model="nombre"
-        placeholder="nombre">
-      </b-input>
+  <section class="container my-5 px-3 ">
+    <div class="my-5 mensaje">
+    <p class="is-size-2">Evaluación de programas de servicio social</p>
+    <p>Te invitamos a compartir tu experiencia respecto del programa de servicio social en el que participaste, a efecto de mejorar la oferta
+      de programas disponibles para los alumnos que desean liberar este requisito. Te recordamos qe tus respues son confidenciales.
+    </p>
+    </div>
+
+    <div class="A apartado" v-if="current == 1">
+        <p class="is-size-3">DATOS GENERALES</p>
+        <div class="field is-flex is-flex-direction-column SINO" >
+          <p>Sexo</p>
+          <b-radio v-model="answers.sexo"
+              native-value="F"
+              type="is-info">
+              F
+          </b-radio>
+          <b-radio v-model="answers.sexo"
+              native-value="M"
+              type="is-info">
+              M
+          </b-radio>
+        </div>
+        <b-field label="Edad">
+            <b-input placeholder="Edad"
+              v-model="answers.edad"
+              type="number"
+              min="0"
+              max="100">
+            </b-input>
+        </b-field>
+        <div class="field is-flex is-flex-direction-column SINO" >
+          <p>¿Cuentas con algún servicio médico?</p>
+          <b-radio v-model="answers.servicioMedico"
+              native-value="IMSS"
+              type="is-info">
+              IMSS
+          </b-radio>
+          <b-radio v-model="answers.servicioMedico"
+              native-value="ISSSTE"
+              type="is-info">
+              ISSSTE
+          </b-radio>
+          <b-radio v-model="answers.servicioMedico"
+              native-value="Ninguno"
+              type="is-info">
+              Ninguno
+          </b-radio>
+          <b-field>
+            <b-input placeholder="Otro (especificar)" v-model="answers.servicioMedico"></b-input>
+          </b-field>
+        </div>
+    </div>
+
+    <div class="B apartado" v-if="current == 2">
+      <p class="is-size-3">INFORMACIÓN GENERAL SOBRE EL SERVICIO SOCIAL</p>
+      <div class="field is-flex is-flex-direction-column SINO" >
+  <p>¿Conoces el reglamento de servicio social vigente de la UNAM?</p>
+
+          <b-radio v-model="answers.p1"
+              native-value="true"
+              type="is-info">
+              Si
+          </b-radio>
+
+          <b-radio v-model="answers.p1"
+              native-value="false"
+              type="is-info">
+              No
+          </b-radio>
+      </div>
+      <div class="field is-flex is-flex-direction-column SINO" >
+          <p>¿Conoces la normatividad vigente del servicio social de tu escuela o facultad?</p>
+          <b-radio v-model="answers.p2"
+              native-value="true"
+              type="is-info">
+              Si
+          </b-radio>
+          <b-radio v-model="answers.p2"
+              native-value="false"
+              type="is-info">
+              No
+          </b-radio>
+      </div>
+      <div class="field">
+  <p>Señala los trs principales criterios que utilizaste para seleccionar el programa de servicio social:</p>
+          <div v-for="b3 in b3Options" :key="b3" class="SINO">
+          <b-checkbox :value=b3
+          v-model="answers.p3"
+          type="is-info">
+              {{b3}}
+          </b-checkbox>
+          </div>
+          <b-field>
+          <b-input placeholder="Otro (especificar)" v-model="answers.p3"></b-input>
+      </b-field>
+      </div>
+    </div>
+
+    <div class="C apartado" v-if="current == 3">
+      <p class="is-size-4">INFORMACIÓN SOBRE LAS CONDICIONES PARA LA PRESENTACIÓN DEL SERVICIO SOCIAL EN LA INSTITUCIÓN RECEPTORA </p>
+      <div class="field is-flex is-flex-direction-column SINO" >
+    <p>Al inicio de servicio social recibiste información sobre la normatividad de la institución:</p>
+
+              <b-radio v-model="answers.p4"
+                  native-value="true"
+                  type="is-info">
+                  Si
+              </b-radio>
+
+              <b-radio v-model="answers.p4"
+                  native-value="false"
+                  type="is-info">
+                  No
+              </b-radio>
+      </div>
+
+      <div class="manyInputs">
+        <p>Durante el servicio social, recibiste por parte de los responsables:</p>
+        <table class="table is-fullwidth">
+          <thead>
+            <tr>
+              <th></th>
+              <th>Si</th>
+              <th>No</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(c5 , index ) in c5Options" :key="c5">
+              <td>{{c5}}</td>
+              <td>
+                <b-radio
+                  v-model="answers.p5[index]"
+                  native-value="true"
+                  type="is-info">
+                </b-radio>
+              </td>
+              <td>
+                <b-radio
+                  v-model="answers.p5[index]"
+                  native-value="false"
+                  type="is-info">
+                </b-radio>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="field is-flex is-flex-direction-column SINO" >
+  <p>¿las actividades que desarrollaste se realizaron con base en un proyecti de trabajo de la institucion?</p>
+
+          <b-radio v-model="answers.p6"
+              native-value="true"
+              type="is-info">
+              Si
+          </b-radio>
+
+          <b-radio v-model="answers.p6"
+              native-value="false"
+              type="is-info">
+              No
+          </b-radio>
+      </div>
+
+      <div class="field is-flex is-flex-direction-column SINO" >
+        <p>¿Contaste con un espacio físico adeacuado para realizar tus actividades?</p>
+        <b-radio v-model="answers.p7"
+            native-value="true"
+            type="is-info">
+            Si
+        </b-radio>
+        <b-radio v-model="answers.p7"
+            native-value="false"
+            type="is-info">
+            No
+        </b-radio>
+      </div>
+
+      <div class="manyInputs">
+      <p>Durante el servicio social, recibiste por parte de los responsables:</p>
+      <table class="table is-fullwidth">
+    <thead>
+      <tr>
+        <th></th>
+        <th>Si</th>
+        <th>No</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr  v-for="(c8, index) in c8Options" :key="c8">
+        <td>{{c8}}</td>
+        <td>
+          <b-radio v-model="answers.p8[index]"
+                  native-value="true"
+                  type="is-info">
+
+              </b-radio>
+        </td>
+        <td>
+            <b-radio v-model="answers.p8[index]"
+                  native-value="false"
+                  type="is-info">
+
+              </b-radio>
+        </td>
+      </tr>
+    </tbody>
+      </table>
+      </div>
+
+      <div class="field is-flex is-flex-direction-column SINO" >
+  <p>¿Consideras que el entorno donde se ubica la institución es seguro?</p>
+
+          <b-radio v-model="answers.p9"
+              native-value="true"
+              type="is-info">
+              Si
+          </b-radio>
+
+          <b-radio v-model="answers.p9"
+              native-value="false"
+              type="is-info">
+              No
+          </b-radio>
+      </div>
+
+      <div class="field is-flex is-flex-direction-column SINO" >
+  <p>¿La institución te proporcionó el material/equipo necesario para el desempeño de tus actividades?</p>
+
+          <b-radio v-model="answers.p10"
+              native-value="true"
+              type="is-info">
+              Si
+          </b-radio>
+
+          <b-radio v-model="answers.p10"
+              native-value="false"
+              type="is-info">
+              No
+          </b-radio>
+      </div>
+
+      <div class="field is-flex is-flex-direction-column SINO" >
+  <p>¿El trato que recibiste durante la realización de tu servicio social fue profesional?</p>
+
+          <b-radio v-model="answers.p11"
+              native-value="true"
+              type="is-info">
+              Si
+          </b-radio>
+
+          <b-radio v-model="answers.p11"
+              native-value="false"
+              type="is-info">
+              No
+          </b-radio>
+      </div>
+
+      <div class="field is-flex is-flex-direction-column SINO" >
+  <p>¿Contaste con un espacio físico adeacuado para realizar tus actividades?</p>
+
+          <b-radio v-model="answers.p12"
+              native-value="true"
+              type="is-info">
+              Si
+          </b-radio>
+
+          <b-radio v-model="answers.p12"
+              native-value="false"
+              type="is-info">
+              No
+          </b-radio>
+      </div>
+
+      <div class="field is-flex is-flex-direction-column SINO" >
+  <p>¿La institucion te entregó a tiempo la documentación requerida por tu facultad o escuela (carta de inicio, informes, carta de termino)?</p>
+
+          <b-radio v-model="answers.p13"
+              native-value="true"
+              type="is-info">
+              Si
+          </b-radio>
+
+          <b-radio v-model="answers.p13"
+              native-value="false"
+              type="is-info">
+              No
+          </b-radio>
+      </div>
+
+      <div class="field is-flex is-flex-direction-column SINO" >
+  <p>¿La institució te dió todas las facilidades para realizar tramites académicos-administrativos ante tu facultad o escuela?</p>
+
+          <b-radio v-model="answers.p14"
+              native-value="true"
+              type="is-info">
+              Si
+          </b-radio>
+
+          <b-radio v-model="answers.p14"
+              native-value="false"
+              type="is-info">
+              No
+          </b-radio>
+      </div>
+    </div>
+
+    <div class="D apartado" v-if="current == 4">
+      <p class="is-size-3">INFORMACIÓN SOBRE EL PROGRAMA DE SERVICIO SOCIAL</p>
+      <div class="manyInputs">
+        <p>De acuerdo con el programa registrado:</p>
+        <table class="table is-fullwidth">
+      <thead>
+        <tr>
+          <th></th>
+          <th>Si</th>
+          <th>No</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for="(d14, index) in d14Options" :key="d14">
+          <td>{{d14}}</td>
+          <td>
+            <b-radio v-model="answers.p14[index]"
+                    native-value="true"
+                    type="is-info">
+
+                </b-radio>
+          </td>
+          <td>
+              <b-radio v-model="answers.p14[index]"
+                    native-value="false"
+                    type="is-info">
+
+                </b-radio>
+          </td>
+        </tr>
+      </tbody>
+        </table>
+      </div>
+
+      <div class="manyInputs">
+        <p>Sobre tu perfil profesional</p>
+        <table class="table is-fullwidth">
+      <thead>
+        <tr>
+          <th></th>
+          <th>Si</th>
+          <th>No</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for="(d15,index) in d15Options" :key="d15">
+          <td>{{d15}}</td>
+          <td>
+            <b-radio v-model="answers.p15[index]"
+                    native-value="true"
+                    type="is-info">
+
+                </b-radio>
+          </td>
+          <td>
+              <b-radio v-model="answers.p15[index]"
+                    native-value="false"
+                    type="is-info">
+
+                </b-radio>
+          </td>
+        </tr>
+      </tbody>
+        </table>
+      </div>
+
+      <div class="field is-flex is-flex-direction-column SINO" >
+        <p>De acuerdo al desarrollo del programa en el que participaste en cual de las siguientes áreas lo enmarcas (Elige solo una)</p>
+        <b-radio v-model="answers.p16"
+            v-for="d16 in d16Options"
+            :key="d16"
+            native-value="true"
+            type="is-info">
+            {{d16}}
+        </b-radio>
+      </div>
+
+      <div class="manyInputs">
+      <p>¿Quien asesoró y supervisó las actividades que realizaste y con que frecuencia?(Señala con una X la respuesta mas adecuada en el recuadro correspondiente)</p>
+      <table class="table is-fullwidth">
+    <tbody>
+      <tr v-for="(d17,index) in d17Options" :key="d17">
+        <td>{{d17}}</td>
+
+      <td>
+        <b-field >
+              <b-select placeholder="Frecuencia" v-model="answers.p17[index]">
+                  <option
+                      v-for="frec in frecuencia"
+                      :value="frec"
+                      :key="frec">
+                      {{ frec }}
+                  </option>
+              </b-select>
+          </b-field>
+      </td>
+      </tr>
+    </tbody>
+      </table>
+      </div>
+    </div>
+
+    <div class="E apartado" v-if="current == 5">
+      <p class="is-size-3">APOYOS</p>
+
+      <div class="field is-flex is-flex-direction-column SINO" >
+    <p>¿El programa en el que participaste ofrece apoyos académicos?</p>
+
+              <b-radio v-model="answers.p18"
+                  native-value="true"
+                  type="is-info">
+                  Si
+              </b-radio>
+
+              <b-radio v-model="answers.p18"
+                  native-value="false"
+                  type="is-info">
+                  No
+              </b-radio>
+      </div>
+
+      <div class="field is-flex is-flex-direction-column SINO" >
+  <p>¿El programa en el que participaste ofrece seguro de vida?</p>
+
+          <b-radio v-model="answers.p19"
+              native-value="true"
+              type="is-info">
+              Si
+          </b-radio>
+
+          <b-radio v-model="answers.p19"
+              native-value="false"
+              type="is-info">
+              No
+          </b-radio>
+      </div>
+
+      <div class="field is-flex is-flex-direction-column SINO" >
+  <p>¿El programa en el que participaste ofrece apoyo económico?</p>
+
+          <b-radio v-model="answers.p20"
+              native-value="true"
+              type="is-info">
+              Si
+          </b-radio>
+
+          <b-radio v-model="answers.p20"
+              native-value="false"
+              type="is-info">
+              No
+          </b-radio>
+      </div>
+
+      <div class="manyInputs">
+  <p>Los apoyos económicos señalados en el programa:</p>
+  <table class="table is-fullwidth">
+  <thead>
+  <tr>
+    <th></th>
+    <th>Si</th>
+    <th>No</th>
+  </tr>
+  </thead>
+
+  <tbody>
+  <tr v-for="(e21,index) in e21Options" :key="e21">
+    <td>{{e21}}</td>
+    <td>
+        <b-radio v-model="answers.p21[index]"
+              native-value="true"
+              type="is-info">
+
+          </b-radio>
+    </td>
+    <td>
+        <b-radio v-model="answers.p21[index]"
+              native-value="false"
+              type="is-info">
+
+          </b-radio>
+    </td>
+  </tr>
+  </tbody>
+  </table>
+      </div>
+    </div>
+
+  <div class="F apartado" v-if="current == 6">
+    <p class="is-size-3">EXPERIENCIA</p>
+
+    <div class="manyInputs">
+    <p>Califica del 1 al 10 (en donde 1 es el de menor valor y 10 el de mayor valor) cada uno de los siguientes aspectos</p>
+    <table class="table is-fullwidth">
+   <tbody>
+    <tr v-for="(f22,index) in f22Options" :key="f22">
+      <td>{{f22}}</td>
+
+     <td>
+       <b-field >
+            <b-select placeholder="Seleccionar" v-model="answers.p22[index]">
+                <option v-for="i in 10" :key="i" :value="i">{{i}}</option>
+            </b-select>
+        </b-field>
+     </td>
+    </tr>
+   </tbody>
+    </table>
+    </div>
+
+    <div class="manyInputs">
+       <p>Consideras que el servicio social es:</p>
+    <p>Califica del 1 al 10 (en donde 1 es el de menor valor y 10 el de mayor valor) cada uno de los siguientes aspectos</p>
+    <table class="table is-fullwidth">
+   <tbody>
+    <tr v-for="(f23,index) in f23Options" :key="f23">
+      <td>{{f23}}</td>
+
+     <td>
+       <b-field >
+            <b-select placeholder="Seleccionar" v-model="answers.p23[index]">
+                <option v-for="i in 10" :key="i" :value="i">{{i}}</option>
+            </b-select>
+        </b-field>
+     </td>
+    </tr>
+   </tbody>
+    </table>
+    </div>
+
+     <div class="manyInputs">
+       <p>Consideras que el servicio social es:</p>
+    <p>Califica del 1 al 10 (en donde 1 es el de menor valor y 10 el de mayor valor) cada uno de los siguientes aspectos</p>
+    <table class="table is-fullwidth">
+   <tbody>
+    <tr v-for="(f24,index) in f24Options" :key="f24">
+      <td>{{f24}}</td>
+
+     <td>
+       <b-field >
+            <b-select placeholder="Seleccionar" v-model="answers.p24[index]">
+                <option v-for="i in 10" :key="i" :value="i">{{i}}</option>
+            </b-select>
+        </b-field>
+     </td>
+    </tr>
+   </tbody>
+    </table>
+    </div>
+
+    <div class="field is-flex is-flex-direction-column SINO" >
+<p>¿Retomarías tu experiencia de servicio social para desarrollar tu tesis? (solo si aplica tu caso)</p>
+
+        <b-radio v-model="answers.p25"
+            native-value="true"
+            type="is-info">
+            Si
+        </b-radio>
+
+        <b-radio v-model="answers.p25"
+            native-value="false"
+            type="is-info">
+            No
+        </b-radio>
+    </div>
+
+    <div class="field is-flex is-flex-direction-column SINO" >
+<p>¿Recomiendas el programa en el que participaste?</p>
+
+        <b-radio v-model="answers.p26"
+            native-value="true"
+            type="is-info">
+            Si
+        </b-radio>
+
+        <b-radio v-model="answers.p26"
+            native-value="false"
+            type="is-info">
+            No
+        </b-radio>
+        <b-field label="¿Por qué?">
+        <b-input placeholder="Opinion" v-model="answers.p27"></b-input>
     </b-field>
-    <b-field label="Ocupación: ">
-      <b-input
-        type="text"
-        v-model="ocupacion"
-        placeholder="Ocupación">
-      </b-input>
+    </div>
+
+    <div class="manyInputs">
+       <p>Con respecto a tu servicio:</p>
+    <table class="table is-fullwidth">
+   <tbody>
+
+   <tr>
+     <td>
+       <p>La información que te proporcionaron sobre los requisitos y trámites para el servicio social en tu escuela o facultad fue:</p>
+     </td>
+     <td>
+          <b-field >
+            <b-select placeholder="Seleccionar" v-model="answers.p28">
+                <option v-for="adj in adjetivos" :key="adj" :value="adj">{{adj}}</option>
+            </b-select>
+        </b-field>
+       </td>
+   </tr>
+
+   </tbody>
+    </table>
+    </div>
+
+    <div class="manyInputs">
+       <p>Con respecto a la plataforma SIASS web:</p>
+    <table class="table is-fullwidth">
+   <tbody>
+
+   <tr>
+     <td>
+       <p>La información que te proporcionaron sobre los programas fue:</p>
+     </td>
+     <td>
+          <b-field >
+            <b-select placeholder="Seleccionar" v-model="answers.p29">
+                <option v-for="adj in adjetivos" :key="adj" :value="adj">{{adj}}</option>
+            </b-select>
+        </b-field>
+       </td>
+   </tr>
+
+   </tbody>
+    </table>
+    </div>
+
+    <b-field label="¿Tienes algún comentario u observación respecto al diseño de este documento?">
+            <b-input placeholder="Respuesta" v-model="answers.p30"></b-input>
     </b-field>
-    <b-field label="Dirección: ">
-      <b-input
-        type="text"
-        v-model="direccion"
-        placeholder="Dirección">
-      </b-input>
-    </b-field>
-    <b-field label="Código postal: ">
-      <b-input
-        type="text"
-        v-model="codigoPostal"
-        placeholder="Código postal">
-      </b-input>
-    </b-field>
-    <b-field label="Número de personas que viven en el hogar: ">
-      <b-input
-        type="text"
-        v-model="noPersonasHogar"
-        placeholder="Número de personas que viven en el hogar">
-      </b-input>
-    </b-field>
-    <b-field label="Edad del jefe de familia: ">
-      <b-input
-        type="text"
-        v-model="edadGfeFam"
-        placeholder="Edad jefe de familia">
-      </b-input>
-    </b-field>
-    <br>
-    <b-button class="is-info">
-      Enviar formulario
-    </b-button>
-    <br><br><br><br><br><br>
+
+    <div class="my-6 mb-6">
+        <b-field >
+            <button
+            :disabled="true"
+            class="button is-success is-medium"
+            @click="enviarRegistro()"
+            >
+                Enviar
+            </button>
+          </b-field>
+    </div>
+
+  </div>
+
+  <b-pagination
+  class="pag"
+            :total="total"
+            v-model="current"
+            :range-before="rangeBefore"
+            :current="current"
+            :range-after="rangeAfter"
+            :order="order"
+            :size="size"
+            :simple="isSimple"
+            :rounded="isRounded"
+            :per-page="perPage"
+            :icon-prev="prevIcon"
+            :icon-next="nextIcon"
+            aria-next-label="Next page"
+            aria-previous-label="Previous page"
+            aria-page-label="Page"
+            aria-current-label="Current page">
+  </b-pagination>
+
+      <!--   <pre>{{$data}}</pre> -->
   </section>
 </template>
 
@@ -56,13 +684,181 @@
 export default {
   data () {
     return {
-      nombre: '',
-      ocupacion: '',
-      direccion: '',
-      codigoPostal: null,
-      noPersonasHogar: null,
-      edadGfeFam: null
+      total: 6,
+      current: 1,
+      perPage: 1,
+      rangeBefore: 6,
+      rangeAfter: 6,
+      order: 'is-centered',
+      size: '',
+      isSimple: false,
+      isRounded: false,
+      prevIcon: 'chevron-left',
+      nextIcon: 'chevron-right',
+
+      sexo: '',
+      answers: {
+        sexo: '',
+        edad: '',
+        servicioMedico: '',
+        p1: '',
+        p2: '',
+        p3: '',
+        p4: '',
+        p5: {
+          pp0: '',
+          pp1: '',
+          pp2: '',
+          pp3: '',
+          pp4: ''
+        },
+        p6: '',
+        p7: '',
+        p8: '',
+        p9: '',
+        p10: '',
+        p11: '',
+        p12: '',
+        p13: '',
+        p14: '',
+        p15: '',
+        p16: '',
+        p17: '',
+        p18: '',
+        p19: '',
+        p20: '',
+        p21: '',
+        p22: '',
+        p23: '',
+        p24: '',
+        p25: '',
+        p26: '',
+        p27: '',
+        p28: '',
+        p29: '',
+        p30: ''
+      },
+      b3Options: [
+        'Actividades descritas en el programa',
+        'Apoyo económico',
+        'Asesoría académica',
+        'Dependencia de la UNAM',
+        'Flexibilidad en horarios',
+        'Institución del sector público',
+        'Institucíon del sector social',
+        'Invitación de profesores',
+        'Modalidad de titulación por servicio social',
+        'Objetivos del programa',
+        'Oportunidad de desarrollo de tesis',
+        'Prestigio de la institución',
+        'Recomendación de compañeros'
+      ],
+      c5Options: [
+        'ASESORIA',
+        'ACOMPAÑAMIENTO',
+        'SUPERVISION',
+        'SEGUIMIENTO'
+      ],
+      c8Options: [
+        'HIGIENE',
+        'SEGURIDAD',
+        'PROTECCIÓN CIVIL'
+      ],
+      d14Options: [
+        'Se cumplieron los objetivos señalados',
+        'Se cumplieron las actividades decritas',
+        'Las actividades del programa son congruentes con el objetivo',
+        'Las actividades del programa retribuyen a la sociedad'
+      ],
+      d15Options: [
+        'Aplicaste conocimientos',
+        'Desarrollaste habilidades',
+        'Enriqueciste tus conocimientos',
+        'Fortaleciste tus habilidades'
+      ],
+      d16Options: [
+        'Apoyo administrativo',
+        'Arte, cultura y recreación',
+        'Ciencia, tecnología e innovación',
+        'Derechos humanos, seguridad social y jurídica',
+        'Desarrollo social',
+        'Educación',
+        'Equipamiento e infraestructura urbana y rural',
+        'Medio ambiente y desarrollo sustentable',
+        'Medio de comunicación',
+        'Modernización y automatización de la gestión administrativa',
+        'Salud',
+        'Seguridad alimentaria',
+        'Seguridad energética',
+        'Investigación'
+      ],
+      d17Options: [
+        'Coordinador administrativo del programa',
+        'Responsable directo del programa',
+        'Alguien diferente a los dos anteriores'
+      ],
+      frecuencia: [
+        'Diario',
+        'Semana',
+        'Quincena',
+        'Mes',
+        'Bimestre',
+        'Trimestre',
+        'Semestre',
+        'No recibí asesoría'
+
+      ],
+      e21Options: [
+        'Te fueron otorgados en tiempo y forma',
+        'Fueron condicionados',
+                `Hubo procedimientos transparentes
+en la asignación y entrega`,
+                'Se te proporcionó sólo una parte',
+                'No se te proporcionó el apoyo'
+      ],
+      f22Options: [
+        'Alguien diferente a los dos anteriores',
+        'Contribuiste en el logro de los objetivos indicados en el programa',
+        'Adquiriste nuevos conocimientos',
+        'Fortaleciste habilidades',
+        'Obtuviste herramientas para tu inserción en el medio laboral',
+        'Fortaleciste tu formación profesional',
+        'Enriqueciste tu formación personal',
+        'Tu participación en el programa de servicio tuvo impacto social'
+      ],
+      f23Options: [
+        'Un medio para retribuir a la sociedad',
+        'La actividad que permite fortalecer habilidades y destrezas',
+        'El complemento a la formación profesional'
+      ],
+      f24Options: [
+        'Impacto social',
+        'Formación profesional',
+        'Formación personal'
+      ],
+      adjetivos: [
+        'muy mala',
+        'mala',
+        'regular',
+        'buena',
+        'excelente'
+      ]
+
     }
   }
+
 }
 </script>
+<style scoped>
+.SINO *{
+  margin: .5rem 0 !important;
+
+}
+.apartado, .pag{
+   margin: 5rem 0;
+}
+.manyInputs{
+  margin: 1.5rem 0;
+}
+
+</style>