@ecored-sena/base-kit 0.0.1

package/plugin/components/TarjetaAudio.vue

@@ -0,0 +1,65 @@
+<template lang="pug">
+.tarjeta-audio
+  .row.align-items-center
+    .col
+      .tarjeta-audio__texto.h5.fst-italic.mb-0(v-html="texto")
+      .tarjeta-audio__input.mt-2(v-if="!noBarra")
+        input(
+          v-model="sliderVal",
+          type="range", 
+          max="100", 
+          :style="{'background-size': `${sliderVal}% 100%`}",
+          @input="onSliderMove"
+        )
+      .tarjeta-audio__tiempo.text-end.pt-1(v-if="tiempo")
+        span {{currentTimeDisplay}}
+        span {{audioDurationDisplay}}
+    .col-auto.ps-0
+      .audio.position-relative(@mouseover.once="$emit('audio-hover')")
+        slot
+        .spinner-border.spinner-border-sm(v-if="!audioCanPlay" role="status")
+          span.visually-hidden Loading..
+        button.audio__btn(v-else-if="state ==='pause'"  @click="play")
+          img(src="@/assets/template/audio.svg")
+        button.audio__btn(v-else @click="pause")
+          img(src="@/assets/template/pause.svg")
+
+</template>
+
+<script>
+import audioMixins from './audioMixins'
+export default {
+  name: 'TarjetaAudio',
+  mixins: [audioMixins],
+  props: {
+    texto: {
+      type: String,
+      required: true,
+    },
+    noBarra: {
+      type: Boolean,
+      default: false,
+    },
+    tiempo: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data: () => ({
+    sliderVal: 0,
+  }),
+  watch: {
+    currentTime() {
+      this.sliderVal = (this.currentTime / this.audioDuration) * 100
+    },
+  },
+  methods: {
+    onSliderMove() {
+      this.audioElement.currentTime =
+        (this.sliderVal / 100) * this.audioDuration
+    },
+  },
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/TimeLineRED.vue

@@ -0,0 +1,51 @@
+<template lang="pug">
+.linea-tiempo-d
+  .linea-tiempo-d__item.row(
+    v-for="(item, index) in elements"
+    :key="'linea-tiempo-d-key-'+item.id"
+    :class="{'linea-tiempo-d__item--selected' : selected === item.id}"
+  )
+    .col-auto.linea-tiempo-d__item__col-number
+      .linea-tiempo-d__item__number.tarjeta.tarjeta--gris(
+        :class="[,{'px-3' : item.numero.length > 1}]"
+         @click="selected = item.id"
+         @mouseover="mostrarIndicador = mostrarIndicador && index >= 1 ? false : mostrarIndicador"
+      )
+        .indicador__container(v-if="mostrarIndicador && index === 1")
+          .indicador--click
+        span(v-html="item.numero")
+      .linea-tiempo-d__item__dots(
+        v-if="index < elements.length -1"
+      )
+
+    .col(:class="{'mb-4' : index < elements.length -1}")
+      .linea-tiempo-d__item__content.tarjeta.tarjeta--gris
+        .linea-tiempo-d__item__content__title.px-3(
+          @click="selected = item.id"
+          @mouseover="mostrarIndicador = mostrarIndicador && index >= 1 ? false : mostrarIndicador"
+        )
+          span(v-html="item.titulo")
+        .linea-tiempo-d__item__content__slot(
+          :style="{ height: rendered && selected === item.id ? getActiveHeight(item.id) : 0 } "
+        )
+          .p-3.pt-0(:ref="item.id" v-child="item.elm" )
+
+  .hidden-slot
+    slot
+</template>
+
+<script>
+import componentSlotMixins from './componentSlotMixins'
+export default {
+  name: 'TimeLineRED',
+  mixins: [componentSlotMixins],
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+  computed: {},
+  watch: {},
+  methods: {},
+}
+</script>
+
+<style lang="sass"></style>

package/plugin/components/actividad/ActividadController.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="actividad-controller">
+    <!-- parrafo → actividad Completar frases -->
+    <ActividadCompletar v-if="parrafo && !cuestionario" :parrafo="parrafo" />
+    <!-- cuestionario → actividad Cuestionario -->
+    <ActividadCuestionario
+      v-else-if="cuestionario"
+      :cuestionario="cuestionario"
+    />
+  </div>
+</template>
+
+<script>
+import ActividadCompletar from './actividadCompletar/ActividadCompletar.vue'
+import ActividadCuestionario from './actividadCuestionario/Actividad.vue'
+
+export default {
+  name: 'ActividadController',
+  components: {
+    ActividadCompletar,
+    ActividadCuestionario,
+  },
+  props: {
+    parrafo: {
+      type: Object,
+      default: null,
+    },
+    cuestionario: {
+      type: Object,
+      default: null,
+    },
+  },
+}
+</script>

package/plugin/components/actividad/actividadCompletar/ActividadCompletar.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="tarjeta--blanca">
+    <div class="row align-items-center mb-4">
+      <div class="col-auto">
+        <img src="@/assets/componentes/icon-actividad.svg" alt="" />
+      </div>
+      <div class="col ">
+        <h2 class="titulo-tercero mb-0">
+          {{ parrafo.titulo }}
+        </h2>
+        <p class="mb-0" v-html="parrafo.introduccion"></p>
+      </div>
+    </div>
+    <div class="tarjeta tarjeta--lightest-gray px-4 pb-4 pt-4 px-md-5">
+      <ActividadResultados
+        v-if="mostrarResultados"
+        :respuestas="resultadosVerificacion"
+        :mensaje-aprobado="parrafo.mensaje_final_aprobado"
+        :mensaje-reprobado="parrafo.mensaje_final_reprobado"
+        :titulo-aprobado="parrafo.titulo_aprobado"
+        :titulo-reprobado="parrafo.titulo_reprobado"
+        :porcentaje-aprobadas="porcentajeAprobacion"
+        :total-preguntas-base="parrafo.textos.length"
+        :preguntas-count="parrafo.textos.length"
+        @reiniciar="reiniciarActividad"
+      />
+      <ActividadParrafo
+        v-else
+        :instruccion="parrafo.instruccion"
+        :imagen="parrafo.imagen"
+        :textos="parrafo.textos"
+        @respuesta-cambiada="actualizarRespuesta"
+      />
+    </div>
+    <ActividadCompletarFooter
+      v-if="!mostrarResultados"
+      class="mx-4 mx-md-5"
+      :verificando="verificando"
+      :contador="contadorResultados"
+      @continuar="verificarRespuestas"
+    />
+  </div>
+</template>
+
+<script>
+import ActividadParrafo from './ActividadParrafo'
+import ActividadCompletarFooter from './ActividadCompletarFooter'
+import ActividadResultados from './ActividadResultados'
+import endGameSuccessSound from '@/assets/actividad/audio/end-game-success.mp3'
+import endGameFailSound from '@/assets/actividad/audio/end-game-fail.mp3'
+
+export default {
+  name: 'ActividadCompletar',
+  components: {
+    ActividadParrafo,
+    ActividadCompletarFooter,
+    ActividadResultados,
+  },
+  props: {
+    parrafo: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      respuestasUsuario: {},
+      mostrarResultados: false,
+      resultadosVerificacion: [],
+      porcentajeAprobacion: 0,
+      verificando: false,
+      contadorResultados: 0,
+      intervaloContador: null,
+    }
+  },
+  mounted() {
+    this.inicializarRespuestas()
+  },
+  beforeDestroy() {
+    // Limpiar intervalo si existe
+    if (this.intervaloContador) {
+      clearInterval(this.intervaloContador)
+    }
+  },
+  methods: {
+    inicializarRespuestas() {
+      if (this.parrafo.textos.length > 0 && this.parrafo?.barajarPreguntas) {
+        this.parrafo.textos.sort(() => Math.random() - 0.5)
+      }
+      this.parrafo.textos.forEach(item => {
+        this.$set(this.respuestasUsuario, item.id, '')
+      })
+    },
+
+    actualizarRespuesta(data) {
+      this.respuestasUsuario = { ...data.todasLasRespuestas }
+    },
+
+    // Nueva función para normalizar texto removiendo tildes y caracteres especiales
+    normalizarTexto(texto) {
+      return texto
+        .toLowerCase()
+        .trim()
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '') // Remover diacríticos (tildes, acentos)
+        .replace(/[^a-z0-9]/g, '') // Remover caracteres especiales, solo alfanuméricos
+    },
+
+    // REPRODUCIR SONIDOS
+    reproducirSonido(audioSrc) {
+      const audio = new Audio(audioSrc)
+      audio.play()
+    },
+
+    verificarRespuestas() {
+      if (this.verificando) return // Evitar múltiples clics
+
+      const resultados = []
+      let correctas = 0
+
+      this.parrafo.textos.forEach(item => {
+        const respuestaUsuario = this.respuestasUsuario[item.id] || ''
+        const respuestaCorrecta = item.respuesta
+
+        // Normalizar ambas respuestas para comparación sin tildes
+        const respuestaUsuarioNormalizada = this.normalizarTexto(
+          respuestaUsuario,
+        )
+        const respuestaCorrectaNormalizada = this.normalizarTexto(
+          respuestaCorrecta,
+        )
+
+        const esCorrecta =
+          respuestaUsuarioNormalizada === respuestaCorrectaNormalizada
+
+        if (esCorrecta) {
+          correctas++
+        }
+
+        // Aplicar feedback visual con icono
+        this.aplicarFeedbackConIcono(item.id, esCorrecta)
+
+        resultados.push({
+          id: item.id,
+          pregunta: item.texto,
+          respuestaUsuario: respuestaUsuario,
+          respuestaCorrecta: respuestaCorrecta,
+          esCorrecta: esCorrecta,
+        })
+      })
+
+      this.resultadosVerificacion = resultados
+      this.porcentajeAprobacion = (correctas / this.parrafo.textos.length) * 100
+
+      // Iniciar contador de 10 segundos
+      this.iniciarContadorResultados()
+    },
+
+    aplicarFeedbackConIcono(itemId, esCorrecta) {
+      const input = this.$el.querySelector(`input[data-item-id="${itemId}"]`)
+      if (input) {
+        // Remover clases anteriores
+        input.classList.remove('input-correcto', 'input-incorrecto')
+
+        // Agregar clase según resultado
+        input.classList.add(esCorrecta ? 'input-correcto' : 'input-incorrecto')
+
+        // Deshabilitar input para evitar cambios
+        input.disabled = true
+
+        // Crear y agregar icono
+        this.agregarIconoFeedback(input, esCorrecta)
+      }
+    },
+
+    agregarIconoFeedback(input, esCorrecta) {
+      // Verificar si ya existe un icono para evitar duplicados
+      const iconoExistente = input.parentNode.querySelector('.feedback-icon')
+      if (iconoExistente) {
+        iconoExistente.remove()
+      }
+
+      // Crear elemento del icono
+      const icono = document.createElement('span')
+      icono.className = `feedback-icon ${
+        esCorrecta ? 'feedback-icon--correcto' : 'feedback-icon--incorrecto'
+      }`
+
+      // Insertar el icono después del input
+      input.parentNode.insertBefore(icono, input.nextSibling)
+    },
+
+    iniciarContadorResultados() {
+      this.verificando = true
+      this.contadorResultados = 1 //
+
+      this.intervaloContador = setInterval(() => {
+        this.contadorResultados--
+
+        if (this.contadorResultados <= 0) {
+          clearInterval(this.intervaloContador)
+          this.mostrarResultados = true
+          this.verificando = false
+
+          // REPRODUCIR SONIDO SEGUN RESULTADO
+          //-------
+          if (this.porcentajeAprobacion >= 70) {
+            this.reproducirSonido(endGameSuccessSound)
+          } else {
+            this.reproducirSonido(endGameFailSound)
+          }
+        }
+      }, 1000)
+    },
+
+    reiniciarActividad() {
+      // Limpiar intervalo si existe
+      if (this.intervaloContador) {
+        clearInterval(this.intervaloContador)
+      }
+
+      this.mostrarResultados = false
+      this.verificando = false
+      this.contadorResultados = 0
+      this.inicializarRespuestas()
+      this.resultadosVerificacion = []
+      this.porcentajeAprobacion = 0
+
+      // Limpiar los inputs en el DOM
+      this.$nextTick(() => {
+        const inputs = this.$el.querySelectorAll('.input-inline')
+        inputs.forEach(input => {
+          input.value = ''
+          input.disabled = false
+          input.classList.remove('input-correcto', 'input-incorrecto')
+        })
+
+        // Remover todos los iconos de feedback
+        const iconos = this.$el.querySelectorAll('.feedback-icon')
+        iconos.forEach(icono => {
+          icono.remove()
+        })
+      })
+    },
+  },
+}
+</script>
+
+<style lang="sass" scoped>
+.boton--disabled
+  opacity: 0.5
+  pointer-events: none
+
+.tarjeta--lightest-gray
+  border: 3px solid #dce4eb
+
+// Estilos para los iconos de feedback
+::v-deep .feedback-icon
+  display: inline-block
+  width: 20px
+  height: 20px
+  margin-right: 8px
+  background-size: contain
+  background-repeat: no-repeat
+  background-position: center
+  vertical-align: middle
+  animation: fadeInScale 0.3s ease-out
+
+  &--correcto
+    background-image: url('~@/assets/actividad/correcto.svg')
+
+  &--incorrecto
+    background-image: url('~@/assets/actividad/incorrecto.svg')
+
+// Animación para la aparición del icono
+@keyframes fadeInScale
+  0%
+    opacity: 0
+    transform: scale(0.5)
+  100%
+    opacity: 1
+    transform: scale(1)
+</style>

package/plugin/components/actividad/actividadCompletar/ActividadCompletarFooter.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="tarjeta-avance">
+    <div class="row align-items-end justify-content-end">
+      <div class="col-auto">
+        <button
+          class="boton btn-lg boton--b py-3 px-4"
+          :disabled="verificando"
+          @click="$emit('continuar')"
+        >
+          <span v-if="!verificando">Verificar respuestas</span>
+          <span v-else>Mostrando resultados en {{ contador }}s</span>
+          <i v-if="!verificando" class="fas fa-arrow-right"></i>
+          <i v-else class="fas fa-clock"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ActividadCompletarFooter',
+  props: {
+    verificando: {
+      type: Boolean,
+      default: false,
+    },
+    contador: {
+      type: Number,
+      default: 0,
+    },
+  },
+}
+</script>
+
+<style lang="sass" scoped>
+.tarjeta-avance
+  background-color: #dce4ebff
+  border-bottom-right-radius: 10px
+  border-bottom-left-radius: 10px
+  overflow: hidden
+  @media (max-width: 560px)
+    padding-left: .85rem !important
+
+  .boton
+    border-radius: 0
+
+  .boton--disabled
+    opacity: 0.5
+    pointer-events: none
+
+  &__barra-container
+    background-color: #b4cce3ff
+    border-radius: 8px
+    height: 16px
+    overflow: hidden
+    .tarjeta-avance__barra
+      background-color: #2c70abff
+      height: 100%
+      border-radius: 8px
+      width: 0%
+      transition: width 0.5s
+</style>