FEAT: Testing and Adding functions to components #56

fabricadesoftware-ifc · Oct 12, 2024 · 715a8fc · 715a8fc
1 parent c48c271
commit 715a8fc
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 77 deletions.
diff --git a/dev-dist/sw.js b/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.h6181b8d6ig"
+    "revision": "0.vlo7k11ajg8"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

diff --git a/src/components/index.js b/src/components/index.js
@@ -38,6 +38,9 @@ import SelectCardsGlobal from '@/components/portal/globals/SelectCardsGlobal.vue
 import SearchAddInfo from '@/components/portal/search/SearchAddInfo.vue'
 import PersonaDataForm from '@/components/portal/Forms/PersonaDataForm.vue'
 import FormModal from '@/components/portal/Forms/ModalForm.vue'
+import AnswerOptionsQuiz from './portal/quiz/AnswerOptionsQuiz.vue';
+import Question from './portal/quiz/Question.vue';
+import QuizQuestion from './portal/quiz/QuizQuestion.vue';
 
 // post
 import CheckList from '@/components/portal/post/CheckList.vue';
@@ -76,5 +79,8 @@ export {
   CardsGlobal,
   SelectCardsGlobal,
   PersonaDataForm,
-  FormModal
+  FormModal,
+  QuizQuestion,
+  AnswerOptionsQuiz,
+  Question,
 };
diff --git a/src/components/portal/quiz/AnswerOptionsQuiz.vue b/src/components/portal/quiz/AnswerOptionsQuiz.vue
@@ -1,22 +1,29 @@
 <script setup>
 
 const props = defineProps({
-  datas: {
-    type: Object
+  data_answer: {
+    type: Array
   },
 })
 
-
-
+const selectAnswer = (answer) => {
+    if (answer.corrected) {
+        
+        return true
+    } else {
+        return false
+    }
+}
 </script>
 
 <template>
-        <div v-for="(item, index) in props.datas" :key="index" class="flex flex-row flex-nowrap w-96 h-9 items-center gap-4">
+        <div v-for="(item, index) in props.data_answer" :key="index" class="flex flex-row flex-nowrap w-[100%] h-auto items-center gap-4" @click="selectAnswer(item)">
 
           <div class="size-8 rounded-full bg-black/30 flex items-center justify-center text-white">
-            {{ item.QuestionLetter }}
+            {{ index }}
+          </div>
+          <div class="max-w-[90%] lg:max-w-[80%] sm:max-w-[70%] break-all bg-slate-400">
+          <h4 class="text-base font-medium">{{item.option}}</h4>
           </div>
-          <h4 class="text-base font-medium ">{{item.QuestionText}}</h4>
-
         </div>
 </template>
diff --git a/src/components/portal/quiz/Question.vue b/src/components/portal/quiz/Question.vue
@@ -1,32 +1,23 @@
 <script setup>
 
 const props = defineProps({
-  datas: {
+  data_question: {
     type: Object
   },
+  index: {
+    type: Number
+  }
 })
 
 </script>
 
 <template>
       <div>
-        <h4 class="text-base font-medium">1. Pergunta:</h4>
+        <h4 class="text-base font-medium">{{ props.index + '. ' + props.data_question.title }}</h4>
 
-        <ol class="list-inside mt-2 mb-2">
-          <li>
-            <p class="mx-5 mt-1 text-base font-medium font-poppins">(I) Teste</p>
-          </li>
-
-          <li>
-            <p class="mx-5 mt-1 text-base font-medium font-poppins">(II) Teste</p>
-          </li>
-
-          <li>
-            <p class="mx-5 mt-1 text-base font-medium font-poppins">(III) Teste</p>
-          </li>
-        </ol>
-
-        <h4 class="mx-5 text-base font-medium">Bla bla bla, nos homens:</h4>
+        <div class="list-inside mt-2 mb-2">
+            <p class="mx-5 mt-1 text-base font-medium font-poppins">{{ props.data_question.question }}</p>
+        </div>
       </div>
 
 </template>
diff --git a/src/components/portal/quiz/QuizQuestion.vue b/src/components/portal/quiz/QuizQuestion.vue
@@ -1,36 +1,31 @@
 <script setup>
+import {ref} from 'vue'
 import ContainerGlobal from '../../layout/ContainerGlobal.vue';
 import AnswerQuiz from './AnswerOptionsQuiz.vue';
 import Question from './Question.vue'
 
-
-const datas = [
-  {
-    QuestionLetter: 'A',
-    QuestionText: 'apenas I,II,III',
-    AnswerNumber: 1
+const props = defineProps({
+  data_question: {
+    type: Array
   },
-  {
-    QuestionLetter: 'B',
-    QuestionText: 'apenas I,II,III',
-    AnswerNumber: 2
+  data_answer: {
+    type: Array
   },
-  {
-    QuestionLetter: 'Cu',
-    QuestionText: 'apenas I,II,III',
-    AnswerNumber: 3
+  index: {
+    type: Number
   }
-]
+})
 
+const currentQuestion = ref(1)
 </script>
 
 <template>
   <ContainerGlobal>
     <div class="flex flex-col gap-5 border border-gray-100 p-6 rounded-lg">
-      <Question/>
+      <Question :data_question="item" :index="item.position" v-for="item, index in props.data_question" :key="index"  v-show="currentQuestion == item.position"/>
 
       <div class="flex flex-col gap-4">
-        <AnswerQuiz :datas="datas"></AnswerQuiz>
+        <AnswerQuiz :data_answer="props.data_answer" />
       </div>
 
     </div>

diff --git a/src/router/index.js b/src/router/index.js
@@ -18,11 +18,6 @@ const router = createRouter({
       name: 'login',
       component: () => import('@/views/auth/LoginView.vue')
     },
-    {
-      path: '/testcomponents',
-      name: 'testcomponents',
-      component: () => import('@/views/TestComponents.vue')
-    },
     {
       path: '/portal',
       name: 'portal',

diff --git a/src/views/Test.vue b/src/views/Test.vue
@@ -1,18 +1,19 @@
 <script setup>
-import ContainerGlobal from '@/components/layout/ContainerGlobal.vue';
 import { computed, ref } from 'vue';
+import {ContainerGlobal, QuizQuestion} from '@/components/';
+
 
 const question = ref([
-    {position: 1, question: 'A mitocôndria é o que?'},
-    {position: 2, question: 'Qual é a função dos ribossomos?'},
-    {position: 3, question: 'Qual é a principal função do núcleo celular?'},
-    {position: 4, question: 'O que é a membrana plasmática?'},
-    {position: 5, question: 'O que é o retículo endoplasmático rugoso?'},
-    {position: 6, question: 'Qual é a função do complexo de Golgi?'}
+    {position: 1, question: 'A mitocôndria é o que?', title: 'Sobre as mitocondrias afirme'},
+    {position: 2, question: 'Qual é a função dos ribossomos?', title: 'Sobre as mitocondrias afirme'},
+    {position: 3, question: 'Qual é a principal função do núcleo celular?', title: 'Sobre as mitocondrias afirme'},
+    {position: 4, question: 'O que é a membrana plasmática?', title: 'Sobre as mitocondrias afirme'},
+    {position: 5, question: 'O que é o retículo endoplasmático rugoso?', title: 'Sobre as mitocondrias afirme'},
+    {position: 6, question: 'Qual é a função do complexo de Golgi?', title: 'Sobre as mitocondrias afirme'}
 ]);
 
 const answer = ref([
-    {position: 1, corrected: true, option: 'A mitocôndria é a organela que cupositiona da respiração da célula', comment_answer: 'pois ela respira porra', question: 1},
+    {position: 1, corrected: true, option: 'A mitocôndria é a organela que cupositiona da respiração da célulaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', comment_answer: 'pois ela respira porra', question: 1},
     {position: 2, corrected: false, option: 'A mitocôndria é responsável pela fotossíntese', comment_answer: 'não, isso é função dos cloroplastos', question: 1},
     {position: 3, corrected: false, option: 'A mitocôndria armazena informações genéticas', comment_answer: 'isso é papel do núcleo', question: 1},
     {position: 4, corrected: false, option: 'A mitocôndria produz proteínas', comment_answer: 'isso é função dos ribossomos', question: 1},
@@ -69,25 +70,6 @@ const selectAnswer = (answer) => {
 </script>
 <template>
     <ContainerGlobal>
-        <div class="w-full h-96 bg-[#212a21] flex justify-center">
-            <div>
-                <button class="text-white" @click="previousSection()"><<</button>
-            </div>
-            <div class="flex flex-col items-center">
-            <div class="w-3/5 h-2/5 bg-[#dcf5a2]">
-                <span v-for="(q, index) in question" :key="index" v-show="currentQuestion == q.position"><h2>{{ q.question }}</h2></span>
-            </div>
-            <div class="w-3/5 relative mt-5 bg-[#dcf5a2]">
-                <span v-for="(a, index) in answer" :key="index" v-show="currentQuestion == a.question" >
-                    <p v-show="watchCorrect">{{ a.corrected ? 'Correta' : 'Errada' }}</p><h2 class="mt-2" @click="selectAnswer(a), watchCorrect = !watchCorrect" :class="!watchCorrect ? 'bg-none' : selectAnswer(a) ? 'bg-green-500 border-2 border-[#309737] rounded-md' : 'bg-red-500 border-2 border-[#912d2d] rounded-md'">{{ a.option }}</h2>
-                <p v-show="watchCorrect">{{ a.comment_answer }}</p>
-                </span>
-            </div>
-            </div>
-
-            <div>
-                <button class="text-white" @click="nextSection()">>></button>
-            </div>
-        </div>
+        <QuizQuestion :data_answer="answer.filter(s => s.question == 1)" :data_question="question" :index="question.position" />
     </ContainerGlobal>
 </template>