From 9ecf0fba6a0e3e720d96b76c72cf6a8d01a57789 Mon Sep 17 00:00:00 2001
From: Alejandra Orozco <nancy.palomerao@uanl.mx>
Date: Wed, 8 Nov 2023 16:32:47 -0600
Subject: [PATCH] =?UTF-8?q?Agregada=20funci=C3=B3n=20para=20descargar=20en?=
 =?UTF-8?q?=20PDF=20y=20correcci=C3=B3n=20de=20incisos=20Se=20implement?=
 =?UTF-8?q?=C3=B3=20una=20funci=C3=B3n=20que=20permite=20a=20los=20usuario?=
 =?UTF-8?q?s=20descargar=20el=20examen=20en=20formato=20PDF,=20facilitando?=
 =?UTF-8?q?=20la=20impresi=C3=B3n=20y=20el=20uso=20posterior.=20Tambi?=
 =?UTF-8?q?=C3=A9n=20se=20corrigi=C3=B3=20la=20generaci=C3=B3n=20de=20inci?=
 =?UTF-8?q?sos=20para=20mostrar=20letras=20min=C3=BAsculas=20(a),=20(b),?=
 =?UTF-8?q?=20(c)=20para=20opciones=20y=20n=C3=BAmeros=20(1),=20(2),=20(3)?=
 =?UTF-8?q?=20si=20se=20agotan=20las=20letras?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/AsisstantView.vue  | 148 ++++++++++++++++++---------
 src/views/Auth/LoginPage.vue |   3 +-
 src/views/DataBaseView.vue   | 189 ++++++++++++++++++++++++-----------
 3 files changed, 234 insertions(+), 106 deletions(-)

diff --git a/src/views/AsisstantView.vue b/src/views/AsisstantView.vue
index 649ebf1..bfbac9d 100644
--- a/src/views/AsisstantView.vue
+++ b/src/views/AsisstantView.vue
@@ -6,10 +6,8 @@ import {
   DocumentTextIcon
 } from '@heroicons/vue/24/outline'
 import { onBeforeMount, onMounted, ref } from 'vue'
+import jsPDF from 'jspdf'
 
-const printPDF = () => {
-  window.print()
-}
 const step = ref(1)
 const showQuestionsBlock = ref(false)
 const isMounted = ref(false)
@@ -33,7 +31,7 @@ const examen = ref({
   ]
 })
 
-// Método para agregar una nueva pregunta
+//Agregar preguntas
 const addQuestion = () => {
   examen.value.questions.push({
     type: examen.value.selectedQuestionType,
@@ -51,6 +49,77 @@ const addQuestion = () => {
   showQuestionsBlock.value = true
 }
 
+const getInciso = (index: number) => {
+  const letras = 'abcdefghijklmnopqrstuvwxyz' // Puedes agregar más letras según tus necesidades
+  if (index < letras.length) {
+    return letras[index] + ')' // Devuelve letras minúsculas como incisos (a), (b), (c), ...
+  } else {
+    return index - letras.length + 1 + ')' // Utiliza números para más opciones (1), (2), (3), ...
+  }
+}
+
+const downloadPDF = () => {
+  const doc = new jsPDF()
+
+  doc.setFontSize(16)
+  doc.text(examen.value.name, 10, 10)
+
+  let y = 30
+  doc.setFontSize(12)
+
+  doc.text(`Escuela: ${examen.value.school}`, 10, y)
+  y += 10
+  doc.text(`Docente: ${examen.value.teacher}`, 10, y)
+  y += 10
+  doc.text(`Materia: ${examen.value.subject}`, 10, y)
+
+  y += 20
+  doc.setFontSize(12)
+  doc.text('Instrucciones', 10, y)
+
+  const instructions = [
+    `1. Este examen consta de ${examen.value.questions.length} preguntas.`,
+    '2. No se permite el uso de dispositivos electrónicos.',
+    '3. Tiempo máximo: 60 minutos.'
+  ]
+
+  y += 10
+  doc.setFontSize(10)
+  instructions.forEach((instruction) => {
+    y += 10
+    doc.text(instruction, 15, y)
+  })
+
+  // Agrega las preguntas y opciones al PDF
+  examen.value.questions.forEach((question, index) => {
+    y += 20
+    doc.setFontSize(12)
+    doc.text(`Pregunta ${index + 1}: ${question.question}`, 10, y)
+
+    if (question.options.length > 0) {
+      y += 10
+      doc.setFontSize(10)
+      question.options.forEach((option, optionIndex) => {
+        y += 10
+        doc.text(`- ${option.option}`, 15, y)
+      })
+    }
+  })
+
+  // Agrega el espacio para calificación y firmas
+  y += 20
+  doc.setFontSize(10)
+  doc.text('Calificación: ________ / 10', 10, y)
+  y += 10
+  doc.text('Firma del Estudiante: __________________________', 10, y)
+  y += 10
+  doc.text('Firma del Profesor: ___________________________', 10, y)
+
+  // Guarda y descarga el PDF
+  doc.save('ExamenTestForge.pdf')
+}
+
+//Opciones preguntas cerradas
 const addOption = (question: { options: Array<{ option: string; isCorrect: boolean }> }) => {
   question.options.push({
     option: '',
@@ -58,6 +127,7 @@ const addOption = (question: { options: Array<{ option: string; isCorrect: boole
   })
 }
 
+//Eliminar Opcion de respuesta
 const removeOption = (
   question: {
     options: Array<{ option: string; isCorrect: boolean }>
@@ -67,9 +137,12 @@ const removeOption = (
   question.options.splice(optionIndex, 1)
 }
 
+//Eliminar preguntas agregadas
 const removeQuestion = (index: number) => {
   examen.value.questions.splice(index, 1)
 }
+
+//Descargar en PDF el examen
 </script>
 
 <template>
@@ -120,6 +193,7 @@ const removeQuestion = (index: number) => {
     <div class="bg-black w-32 rounded-r-2xl text-6xl text-white flex justify-center mt-10">
       {{ step }}
     </div>
+
     <div class="flex flex-col m-20" v-show="step == 1">
       <p class="text-6xl mb-8">Escribe el nombre de tu examen 📄</p>
       <input
@@ -128,6 +202,7 @@ const removeQuestion = (index: number) => {
         v-model="examen.name"
       />
     </div>
+
     <div v-show="step == 2" class="flex flex-col mx-20 my-10">
       <p class="text-6xl mb-8 text-center -mt-14">Datos de identificación📄</p>
       <p class="text-center mb-4">
@@ -224,48 +299,45 @@ const removeQuestion = (index: number) => {
         <h1 class="text-4xl font-bold">Examen Tipo A1</h1>
       </div>
 
-      <div class="border rounded-lg p-4 mb-8">
-        <h2 class="text-2xl font-bold">{{ examen.name }}</h2>
+      <div class="border p-4 mb-8">
+        <h2 class="text-2xl font-bold mb-2">{{ examen.name }}</h2>
         <p class="text-1xl">Escuela: {{ examen.school }}</p>
         <p class="text-1xl">Docente: {{ examen.teacher }}</p>
         <p class="text-1xl">Materia: {{ examen.subject }}</p>
-        <p class="text-1xl">Fecha: ________________________</p>
+        <p class="text-1xl">Fecha:_________</p>
       </div>
 
-      <div class="border rounded-lg p-4 mb-4">
-        <h2 class="text-2xl font-bold">Instrucciones</h2>
+      <div class="border p-4 mb-4">
+        <h2 class="text-2xl font-bold mb-2">Instrucciones</h2>
         <p class="text-1xl">1. Este examen consta de {{ examen.questions.length }} preguntas.</p>
         <p class="text-1xl">2. No se permite el uso de dispositivos electrónicos.</p>
-        <p class="text-1xl">3. Tiempo máximo: 60 minutos.</p>
-      </div>
+        <p class="text-1xl mb-4">3. Tiempo máximo: 60 minutos.</p>
 
-      <div v-for="(question, index) in examen.questions" :key="index">
-        <div class="border rounded-lg p-4 mb-4">
+        <div v-for="(question, index) in examen.questions" :key="index">
           <h3 class="text-2xl font-bold">Pregunta {{ index + 1 }}</h3>
-          <p class="text-1xl">{{ question.question }}</p>
-          <ul class="list-disc list-inside">
-            <li
-              v-for="(option, optionIndex) in question.options"
-              :key="optionIndex"
-              class="text-1xl"
-            >
-              ( ) {{ option.option }}
-            </li>
-          </ul>
+          <p class="text-1x1">{{ question.question }}</p>
+          <div
+            v-for="(option, optionIndex) in question.options"
+            :key="optionIndex"
+            class="text-1xl"
+          >
+            {{ getInciso(optionIndex) }} {{ option.option }}{{ option.option }}
+          </div>
         </div>
-      </div>
 
-      <div class="border rounded-lg p-4 mb-4 text-center">
-        <p class="text-1xl">Calificación: _________________ / 10</p>
-        <p class="text-1xl">Firma del Estudiante: __________________________</p>
-        <p class="text-1xl">Firma del Profesor: ___________________________</p>
+        <p class="text-1xl mb-4">Calificación: ________ / 10</p>
+        <p class="text-1xl mb-4">Firma del Estudiante: __________________________</p>
+        <p class="text-1xl mb-4">Firma del Profesor: ___________________________</p>
       </div>
     </div>
 
     <div v-show="step == 5" class="flex flex-col mx-20 my-10">
       <p class="text-6xl mb-8 text-center -mt-14">Descargar el examen en PDF 📥</p>
+      <p class="text-center mb-4">
+        Si todo esta en orden ¡Descargalo en PDF ya listo para imprimir!
+      </p>
       <div class="text-center mb-4">
-        <button class="bg-blue-500 text-white p-2 px-4 rounded-md" @click="printPDF">
+        <button class="bg-blue-500 text-white p-2 px-4 rounded-md" @click="downloadPDF">
           Descargar PDF
         </button>
       </div>
@@ -312,22 +384,4 @@ const removeQuestion = (index: number) => {
 .directions > p {
   font-weight: bold;
 }
-
-@media print {
-  /* Estilos para la impresión */
-  /* Puedes personalizar la apariencia del PDF aquí */
-  body {
-    margin: 0;
-    padding: 20px;
-  }
-
-  /* Añade estilos específicos para elementos en el PDF */
-  /* Por ejemplo: */
-  .print-header {
-    font-size: 18px;
-    font-weight: bold;
-  }
-
-  /* ... (otros estilos de impresión) */
-}
 </style>
diff --git a/src/views/Auth/LoginPage.vue b/src/views/Auth/LoginPage.vue
index 80b47d9..d6a5c65 100644
--- a/src/views/Auth/LoginPage.vue
+++ b/src/views/Auth/LoginPage.vue
@@ -5,11 +5,10 @@ import { useRoute, useRouter } from 'vue-router'
 const email = ref('')
 const password = ref('')
 const error = ref('')
-
 const router = useRouter()
 
 const login = () => {
-  if (email.value === 'aleOrozco@uanl.edu' && password.value === '123') {
+  if (email.value === 'alejandraOP@uanl.edu' && password.value === '123m_') {
     router.push({ name: 'home' })
   } else {
     if (!email.value || !password.value) {
diff --git a/src/views/DataBaseView.vue b/src/views/DataBaseView.vue
index 64401fb..64e2908 100644
--- a/src/views/DataBaseView.vue
+++ b/src/views/DataBaseView.vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
-import {ChevronRightIcon , BuildingLibraryIcon , UserCircleIcon, DocumentTextIcon} from "@heroicons/vue/24/outline";
-import {computed, onBeforeMount, onMounted, reactive, ref, watch} from "vue";
-import {db} from "../services/firebase";
-import {collection, query, where, getDocs} from "firebase/firestore";
+import {
+  ChevronRightIcon,
+  BuildingLibraryIcon,
+  UserCircleIcon,
+  DocumentTextIcon
+} from '@heroicons/vue/24/outline'
+import { computed, onBeforeMount, onMounted, reactive, ref, watch } from 'vue'
+import { db } from '../services/firebase'
+import { collection, query, where, getDocs } from 'firebase/firestore'
 
 const step = ref(1)
 
@@ -12,87 +17,157 @@ const examen = reactive({
   school: '',
   teacher: '',
   subject: '',
-  theme: '',
+  theme: ''
 })
-const materias = ref(['Español', 'Matematicas' , 'Ciencias Naturales' , 'Fisica'])
-
+const materias = ref(['Español', 'Matematicas', 'Ciencias Naturales', 'Fisica'])
 
 const themes = ref<Array<string>>([])
 
-async function getThemes(){
-  const qs = await getDocs(query(collection(db, examen.subject)));
-      // query(db, collection(db, "themes"), where("subject", "==", examen.subject));
-   qs.forEach((doc) => { themes.value.push(doc.data().Tema) });
-
+async function getThemes() {
+  const qs = await getDocs(query(collection(db, examen.subject)))
+  // query(db, collection(db, "themes"), where("subject", "==", examen.subject));
+  qs.forEach((doc) => {
+    themes.value.push(doc.data().Tema)
+  })
 }
-
-
-
 </script>
 
 <template>
-  <div class="flex flex-col gap-10 z-10 justify-center items-center absolute  w-screen h-screen bg-black/80 "  v-if="isMounted == false">
-    <div class="flex flex-col items-center " >
-      <h1 class="text-4xl text-center w-fit px-10 py-4  rounded-t-3xl text-white  bg-pink-500 ">Asistente </h1>
-      <div class="bg-pink-500 rounded-xl p-2 z-[1]"><p class="text-center text-white text-xl  ">Te guiaremos paso a paso para que puedas crear un examen con tus propias preguntas </p></div>
+  <div
+    class="flex flex-col gap-10 z-10 justify-center items-center absolute w-screen h-screen bg-black/80"
+    v-if="isMounted == false"
+  >
+    <div class="flex flex-col items-center">
+      <h1 class="text-4xl text-center w-fit px-10 py-4 rounded-t-3xl text-white bg-pink-500">
+        Asistente
+      </h1>
+      <div class="bg-pink-500 rounded-xl p-2 z-[1]">
+        <p class="text-center text-white text-xl">
+          Te guiaremos paso a paso para que puedas crear un examen con tus propias preguntas
+        </p>
+      </div>
     </div>
     <div class="text-white flex flex-col gap-8 directions">
-      <p class="flex flex-col "> 1. Escribe el nombre de tu examen 📄 <span class="ml-10">💭Recomendamos aqui pongas el tema del cual se tratara</span></p>
-      <p class="flex flex-col">2. Datos de identificación 🪪 <span class="ml-10 flex flex-col">💭Podras poner tu escuela o dependencia<br> 💭El nombre del maestro <br> 💭La materia </span></p>
-      <p class="flex flex-col">3. Selecciona el tema ➕ <span class="ml-10 flex flex-col"> 💭 Elige entre nuestros temas disponibles los cuales tendran una gran cantidad de preguntas</span> </p>
-      <p class="flex flex-col">4. Visualiza tu examen 👁️ </p>
-      <p class="flex flex-col">5. Si todo esta correcto ✅ ¡Descargalo en PDF ya listo para imprimir! </p>
+      <p class="flex flex-col">
+        1. Escribe el nombre de tu examen 📄
+        <span class="ml-10">💭Recomendamos aqui pongas el tema del cual se tratara</span>
+      </p>
+      <p class="flex flex-col">
+        2. Datos de identificación 🪪
+        <span class="ml-10 flex flex-col"
+          >💭Podras poner tu escuela o dependencia<br />
+          💭El nombre del maestro <br />
+          💭La materia
+        </span>
+      </p>
+      <p class="flex flex-col">
+        3. Selecciona el tema ➕
+        <span class="ml-10 flex flex-col">
+          💭 Elige entre nuestros temas disponibles los cuales tendran una gran cantidad de
+          preguntas</span
+        >
+      </p>
+      <p class="flex flex-col">4. Visualiza tu examen 👁️</p>
+      <p class="flex flex-col">
+        5. Si todo esta correcto ✅ ¡Descargalo en PDF ya listo para imprimir!
+      </p>
     </div>
-    <button class=" px-32 rounded-xl py-2 bg-pink-500 text-white" @click="isMounted = true">Ok! <span class="animate-pulse">👍</span></button>
+    <button class="px-32 rounded-xl py-2 bg-pink-500 text-white" @click="isMounted = true">
+      Ok! <span class="animate-pulse">👍</span>
+    </button>
   </div>
   <div>
-    <div class=" bg-black w-32 rounded-r-2xl text-6xl text-white flex justify-center mt-10  ">
-      {{step}}
+    <div class="bg-black w-32 rounded-r-2xl text-6xl text-white flex justify-center mt-10">
+      {{ step }}
     </div>
-    <div class="flex flex-col m-20 " v-show="step == 1">
-      <p class="text-6xl mb-8">Escribe el nombre de tu examen 📄 </p>
-      <input type="text" class=" h-32 text-6xl text-pink-500 rounded-xl border-2 p-4" v-model="examen.name" @keypress.enter="step++">
-
+    <div class="flex flex-col m-20" v-show="step == 1">
+      <p class="text-6xl mb-8">Escribe el nombre de tu examen 📄</p>
+      <input
+        type="text"
+        class="h-32 text-6xl text-pink-500 rounded-xl border-2 p-4"
+        v-model="examen.name"
+        @keypress.enter="step++"
+      />
     </div>
-    <div v-show="step == 2" class="flex flex-col mx-20 my-10" >
-
-      <p class="text-6xl mb-8 text-center -mt-14">Datos de identificación📄 </p>
-      <p class="text-center mb-4">Tal y como lo escribas en los campos es como aparecera en tu examen</p>
-      <label class="text-xl flex items-center gap-2"><BuildingLibraryIcon class="w-5 stroke-gray-400"/> Escuela</label>
-      <input type="text" class="border-2  h-10 mt-2 rounded-lg p-4 text-pink-500" v-model="examen.school" placeholder='"Esc. Sec. #1 "Benito Juarez""'>
-
-      <label class="text-xl mt-12 flex items-center gap-2"><UserCircleIcon class="w-5 stroke-gray-400"/> Docente</label>
-      <input type="text" class="border-2  h-10 mt-2 rounded-lg p-4 text-pink-500" v-model="examen.teacher" placeholder="Lic. Juan Antonio P.">
-
+    <div v-show="step == 2" class="flex flex-col mx-20 my-10">
+      <p class="text-6xl mb-8 text-center -mt-14">Datos de identificación📄</p>
+      <p class="text-center mb-4">
+        Tal y como lo escribas en los campos es como aparecera en tu examen
+      </p>
+      <label class="text-xl flex items-center gap-2"
+        ><BuildingLibraryIcon class="w-5 stroke-gray-400" /> Escuela</label
+      >
+      <input
+        type="text"
+        class="border-2 h-10 mt-2 rounded-lg p-4 text-pink-500"
+        v-model="examen.school"
+        placeholder='"Esc. Sec. #1 "Benito Juarez""'
+      />
+
+      <label class="text-xl mt-12 flex items-center gap-2"
+        ><UserCircleIcon class="w-5 stroke-gray-400" /> Docente</label
+      >
+      <input
+        type="text"
+        class="border-2 h-10 mt-2 rounded-lg p-4 text-pink-500"
+        v-model="examen.teacher"
+        placeholder="Lic. Juan Antonio P."
+      />
     </div>
 
     <div v-if="step == 3">
-      <p class="text-6xl mb-8 text-center -mt-14">Selecciona el tema ➕ </p>
-     <div class="flex gap-10 justify-center">
-       <div  v-for="(subject,index ) in materias" :key="index" >
-         <button :class="{'bg-pink-500 text-white' : examen.subject == subject , 'flex gap-2 px-3 border-2 border-pink-600 py-1 rounded-xl mt-10' : true }"  @click="examen.subject = subject">{{subject}}</button>
-       </div>
-     </div>
+      <p class="text-6xl mb-8 text-center -mt-14">Selecciona el tema ➕</p>
+      <div class="flex gap-10 justify-center">
+        <div v-for="(subject, index) in materias" :key="index">
+          <button
+            :class="{
+              'bg-pink-500 text-white': examen.subject == subject,
+              'flex gap-2 px-3 border-2 border-pink-600 py-1 rounded-xl mt-10': true
+            }"
+            @click="examen.subject = subject"
+          >
+            {{ subject }}
+          </button>
+        </div>
+      </div>
       <div class="flex">
-        <button class="flex gap-2 px-3 border-2 border-pink-600 py-1 rounded-xl my-10" >{{ themes }}</button>
+        <button class="flex gap-2 px-3 border-2 border-pink-600 py-1 rounded-xl my-10">
+          {{ themes }}
+        </button>
       </div>
     </div>
-    <div :class="{
-      'flex justify-end items-end': step == 1,
-      'flex justify-between ': step != 1
-      }">
-      <button @click="step--" class=" w-20 self-end  flex justify-center rounded-3xl bg-gradient-to-r from-pink-500 to-pink-600 mx-10" v-if="step != 1"><ChevronRightIcon  class="w-10 stroke-white rotate-180"/></button>
-      <button @click="step++" class=" w-20 self-end  flex justify-center rounded-3xl bg-gradient-to-r from-pink-500 to-pink-600 mx-10 " ><ChevronRightIcon  class="w-10 stroke-white "/></button>
+    <div
+      :class="{
+        'flex justify-end items-end': step == 1,
+        'flex justify-between ': step != 1
+      }"
+    >
+      <button
+        @click="step--"
+        class="w-20 self-end flex justify-center rounded-3xl bg-gradient-to-r from-pink-500 to-pink-600 mx-10"
+        v-if="step != 1"
+      >
+        <ChevronRightIcon class="w-10 stroke-white rotate-180" />
+      </button>
+      <button
+        @click="step++"
+        class="w-20 self-end flex justify-center rounded-3xl bg-gradient-to-r from-pink-500 to-pink-600 mx-10"
+      >
+        <ChevronRightIcon class="w-10 stroke-white" />
+      </button>
     </div>
   </div>
 </template>
 
 <style scoped>
-
 .gradient-text-blue {
   background-clip: text;
   color: transparent;
-  background-image: linear-gradient(to right, #70a6ff, #4a8be8); /* Personaliza los colores del gradiente */
+  background-image: linear-gradient(
+    to right,
+    #70a6ff,
+    #4a8be8
+  ); /* Personaliza los colores del gradiente */
 }
 
 .directions > p > span {
@@ -102,4 +177,4 @@ async function getThemes(){
 .directions > p {
   font-weight: bold;
 }
-</style>
\ No newline at end of file
+</style>