@ecored-sena/base-kit 0.0.1

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

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <div class="row align-items-center">
+      <div class="d-none d-lg-block col-3">
+        <img :src="imagen" alt="" />
+      </div>
+      <div class="col">
+        <div>
+          <h3 class="mb-4 pb-4">
+            {{ instruccion }}
+          </h3>
+          <div class="row align-items-center">
+            <ol class="lista-ol--cuadro lista-ol--separador">
+              <li v-for="(item, index) in textos" :key="item.id" class="d-flex">
+                <div class="lista-ol--cuadro__vineta v--green">
+                  <span>{{ index + 1 }}</span>
+                </div>
+                <div
+                  class="texto-con-input"
+                  v-html="procesarTextoConInput(item.texto, item.id)"
+                ></div>
+              </li>
+            </ol>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ActividadParrafo',
+  props: {
+    instruccion: {
+      type: String,
+      default:
+        'Digite en el espacio indicado la palabra que dé sentido a cada frase.',
+    },
+    imagen: {
+      type: String,
+      default: require('@/assets/actividad/imagen1.png'),
+    },
+    textos: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      respuestasUsuario: {},
+    }
+  },
+  mounted() {
+    // Inicializar respuestas del usuario
+    this.textos.forEach(item => {
+      this.$set(this.respuestasUsuario, item.id, '')
+    })
+
+    // Agregar event listeners para los inputs después de que se rendericen
+    this.$nextTick(() => {
+      this.agregarEventListeners()
+    })
+  },
+  methods: {
+    procesarTextoConInput(texto, itemId) {
+      // Reemplazar [respuesta] con un input envuelto en un span para posicionamiento
+      return texto.replace(
+        /\[respuesta\]/g,
+        `<span class="input-container"><input type="text" class="input-inline" data-item-id="${itemId}" placeholder="[?]" /></span>`,
+      )
+    },
+
+    agregarEventListeners() {
+      // Agregar event listeners a todos los inputs
+      const inputs = this.$el.querySelectorAll('.input-inline')
+      inputs.forEach(input => {
+        input.addEventListener('input', this.manejarCambioInput)
+      })
+    },
+
+    manejarCambioInput(event) {
+      const itemId = parseInt(event.target.dataset.itemId)
+      const valor = event.target.value
+      this.$set(this.respuestasUsuario, itemId, valor)
+
+      // Emitir evento para el componente padre
+      this.$emit('respuesta-cambiada', {
+        itemId: itemId,
+        valor: valor,
+        todasLasRespuestas: this.respuestasUsuario,
+      })
+    },
+  },
+}
+</script>
+
+<style lang="sass" scoped>
+img
+  width: auto
+  height: auto
+  display: block
+  margin: auto
+
+.texto-con-input
+  flex: 1
+  line-height: 1.6
+
+// Contenedor para input e icono
+::v-deep .input-container
+  display: inline-block
+  position: relative
+  white-space: nowrap
+
+// Estilos para el input inline
+::v-deep .input-inline
+  display: inline !important
+  border: 2px solid #ddd !important
+  background-color: #f5d982 !important
+  padding: 4px 8px !important
+  margin: 0 2px !important
+  font-size: inherit !important
+  font-family: inherit !important
+  line-height: 1.2 !important
+  min-width: 100px !important
+  max-width: 150px !important
+  text-align: center !important
+  border-radius: 4px !important
+  transition: all 0.3s ease !important
+  vertical-align: baseline !important
+  height: auto !important
+  box-sizing: border-box !important
+
+  &:focus
+    outline: none !important
+    border-color: #556a82 !important
+    background-color: #f0d050 !important
+    box-shadow: 0 0 0 2px rgba(85, 106, 130, 0.2) !important
+
+  &::placeholder
+    color: #666 !important
+    font-size: inherit !important
+    font-weight: normal !important
+
+  // Estados de validación
+  &.input-correcto
+    border-color: #28a745 !important
+    background-color: #d4edda !important
+    color: #155724 !important
+
+    &:focus
+      border-color: #28a745 !important
+      background-color: #c3e6cb !important
+      box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25) !important
+
+  &.input-incorrecto
+    border-color: #dc3545 !important
+    background-color: #f8d7da !important
+    color: #721c24 !important
+
+    &:focus
+      border-color: #dc3545 !important
+      background-color: #f1b0b7 !important
+      box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25) !important
+
+  // Estado deshabilitado
+  &:disabled
+    opacity: 0.8 !important
+    cursor: not-allowed !important
+
+.tarjeta--pregunta
+  background: #dce4eb
+
+.tarjeta-respuesta
+  border: 2px solid transparent
+  cursor: pointer
+  transition: border-color 0.2s
+
+  &:hover
+    border-color: #556a82
+
+    .tarjeta-respuesta__icon:not(.tarjeta-respuesta__icon--correcto):not(.tarjeta-respuesta__icon--incorrecto)
+      background-image: url('~@/assets/actividad/vacio-hover.svg')
+
+  &--correcta
+    border-color: #61ca92ff
+    background-color: #ebfff0ff
+
+    &:hover
+      border-color: #61ca92ff
+
+  &--incorrecta
+    border-color: #ff6b6bff
+    background-color: #ffedecff
+
+    &:hover
+      border-color: #ff6b6bff
+
+  &--disabled
+    cursor: not-allowed
+    pointer-events: none
+
+  &__icon
+    width: 32px
+    height: 32px
+    position: relative
+    background-image: url('~@/assets/actividad/vacio.svg')
+
+    &:hover
+      background-image: url('~@/assets/actividad/vacio-hover.svg')
+
+    &--correcto
+      background-image: url('~@/assets/actividad/correcto.svg')
+
+    &--incorrecto
+      background-image: url('~@/assets/actividad/incorrecto.svg')
+</style>

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

@@ -0,0 +1,215 @@
+<template>
+  <div class="row align-items-center justify-content-around">
+    <div class="col-lg-5">
+      <img
+        v-if="aprobado"
+        src="@/assets/componentes/cuestionario-resultado.svg"
+        alt=""
+        class="mx-auto d-none d-lg-block"
+      />
+      <img
+        v-else
+        src="@/assets/componentes/cuestionario-resultado.svg"
+        alt=""
+        class="mx-auto d-none d-lg-block"
+      />
+    </div>
+    <div class="col-lg-4">
+      <div class="d-flex align-items-center flex-column">
+        <div class="circle-container mb-4">
+          <svg class="circle" viewBox="0 0 36 36">
+            <defs>
+              <linearGradient
+                id="progressGradient"
+                x1="0%"
+                y1="0%"
+                x2="100%"
+                y2="0%"
+              >
+                <stop offset="0%" stop-color="#00FF00" />
+                <stop offset="50%" stop-color="#FFFF00" />
+                <stop offset="100%" stop-color="#FF0000" />
+              </linearGradient>
+            </defs>
+            <path
+              class="circle-bg"
+              d="M18 2.0845
+                a 15.9155 15.9155 0 0 1 0 31.831
+                a 15.9155 15.9155 0 0 1 0 -31.831"
+            />
+            <path
+              class="circle-progress"
+              :stroke-dasharray="`${currentPercentage}, 100`"
+              d="M18 2.0845
+                a 15.9155 15.9155 0 0 1 0 31.831
+                a 15.9155 15.9155 0 0 1 0 -31.831"
+            />
+          </svg>
+          <div class="percentage-text">
+            {{ Math.round(porcentajeAprobadas) }} %
+          </div>
+        </div>
+
+        <template v-if="aprobado">
+          <h3>{{ tituloAprobado }}</h3>
+          <p class="mb-0 text-center">
+            {{ mensajeAprobado }}
+          </p>
+        </template>
+        <template v-else>
+          <h3>{{ tituloReprobado }}</h3>
+          <p class="mb-0 text-center">
+            {{ mensajeReprobado }}
+          </p>
+        </template>
+        <hr class="w-100" />
+        <p class="mb-0">Aciertos: {{ rtas.correctas }} / {{ rtas.total }}</p>
+        <button
+          v-if="totalPreguntasBase >= preguntasCount"
+          class="boton btn-lg boton--b py-3 px-5 mt-3"
+          @click="$emit('reiniciar')"
+        >
+          <span>Volver a intentarlo</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ActividadResultados',
+  props: {
+    respuestas: {
+      type: Array,
+      required: true,
+    },
+    mensajeAprobado: {
+      type: String,
+      default: 'Ha superado la actividad.',
+    },
+    mensajeReprobado: {
+      type: String,
+      default:
+        'Se recomienda volver a revisar el componente formativo e intentar nuevamente la actividad didáctica.',
+    },
+    tituloAprobado: {
+      type: String,
+      default: '¡FELICIDADES!',
+    },
+    tituloReprobado: {
+      type: String,
+      default: 'VUELVA A INTENTARLO',
+    },
+    porcentajeAprobadas: {
+      type: Number,
+      required: true,
+    },
+    totalPreguntasBase: {
+      type: Number,
+      required: true,
+    },
+    preguntasCount: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      currentPercentage: 0,
+    }
+  },
+  computed: {
+    rtas() {
+      const respuestas = {
+        correctas: 0,
+        incorrectas: 0,
+        total: this.respuestas.length,
+        porcentaje: 0,
+      }
+      this.respuestas.forEach(r => {
+        if (r.esCorrecta) {
+          respuestas.correctas++
+        } else {
+          respuestas.incorrectas++
+        }
+      })
+      respuestas.porcentaje = (respuestas.correctas / respuestas.total) * 100
+      return respuestas
+    },
+    aprobado() {
+      return this.rtas.porcentaje >= 70
+    },
+  },
+  mounted() {
+    this.animateProgress()
+  },
+  methods: {
+    animateProgress() {
+      const duration = 1500
+      const start = performance.now()
+
+      const animate = time => {
+        const timeFraction = (time - start) / duration
+        if (timeFraction > 1) {
+          this.currentPercentage = this.porcentajeAprobadas
+        } else {
+          this.currentPercentage = timeFraction * this.porcentajeAprobadas
+          requestAnimationFrame(animate)
+        }
+      }
+
+      requestAnimationFrame(animate)
+    },
+  },
+}
+</script>
+
+<style lang="sass" scoped>
+
+
+.resultados
+  &__icono
+    width: 150px
+    height: 150px
+    background-size: cover
+    background-repeat: no-repeat
+    &--correcto
+      background-image: url('~@/assets/actividad/correcto.svg')
+    &--incorrecto
+      background-image: url('~@/assets/actividad/incorrecto.svg')
+    @media (max-width: 560px)
+      width: 80px
+      height: 80px
+
+.circle-container
+  width: 150px
+  height: 150px
+  position: relative
+  display: flex
+  justify-content: center
+  align-items: center
+
+.circle
+  transform: rotate(0deg)
+  width: 100%
+  height: 100%
+
+.circle-bg
+  fill: none
+  stroke: #eee
+  stroke-width: 3.8
+
+.circle-progress
+  fill: none
+  stroke: url(#progressGradient)
+  stroke-width: 3.8
+  stroke-linecap: round
+  transition: stroke-dasharray 0.1s
+
+.percentage-text
+  position: absolute
+  font-size: 1.5rem
+  font-weight: bold
+  color: #666
+</style>

package/plugin/components/actividad/actividadCuestionario/Actividad.vue

@@ -0,0 +1,222 @@
+<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">
+          {{ cuestionario.titulo }}
+        </h2>
+        <p class="mb-0" v-html="cuestionario.introduccion"></p>
+      </div>
+    </div>
+    <div class="tarjeta tarjeta--lightest-gray px-4 pb-4 pt-4 px-md-5">
+      <div
+        v-if="respuestas.length !== preguntas.length"
+        class="d-flex justify-content-end mb-2"
+      >
+        <div class="form-check form-switch">
+          <input
+            id="switchCheckAudio"
+            v-model="audioEnabled"
+            class="form-check-input"
+            type="checkbox"
+          />
+          <label class="form-check-label" for="switchCheckAudio">¿Audio?</label>
+        </div>
+      </div>
+      <ActividadResultados
+        v-if="respuestas.length === preguntas.length"
+        :respuestas="respuestas"
+        :mensaje-aprobado="cuestionario.mensaje_final_aprobado"
+        :mensaje-reprobado="cuestionario.mensaje_final_reprobado"
+        :titulo-aprobado="cuestionario.titulo_aprobado"
+        :titulo-reprobado="cuestionario.titulo_reprobado"
+        :porcentaje-aprobadas="porcentajeAprobadas"
+        :preguntas-count="preguntas.length"
+        :total-preguntas-base="cuestionario.preguntas.length"
+        @reiniciar="onReiniciar"
+      />
+      <ActividadPregunta
+        v-else
+        :pregunta="preguntaSelected"
+        :numero-pregunta="preguntaSelectedIdx + 1"
+        @respuestaSelected="onRrespuestaSelected"
+      />
+    </div>
+    <ActividadBarraAvance
+      :pregunta-index="preguntaSelectedIdx"
+      :preguntas-count="preguntas.length"
+      :respuestas-length="respuestas.length"
+      :continuar-disabled="continuarDisabled"
+      :respuestas="respuestas"
+      class="mx-4 mx-md-5"
+      @continuar="onContinuar"
+      @reiniciar="onReiniciar"
+    />
+  </div>
+</template>
+
+<script>
+import screenChangeSound from '@/assets/actividad/audio/screen-change.mp3'
+import successSound from '@/assets/actividad/audio/success.mp3'
+import failSound from '@/assets/actividad/audio/fail.mp3'
+import endGameSuccessSound from '@/assets/actividad/audio/end-game-success.mp3'
+import endGameFailSound from '@/assets/actividad/audio/end-game-fail.mp3'
+import ActividadPregunta from './ActividadPregunta'
+import ActividadBarraAvance from './ActividadBarraAvance'
+import ActividadResultados from './ActividadResultados'
+export default {
+  name: 'Actividad',
+  components: {
+    ActividadPregunta,
+    ActividadBarraAvance,
+    ActividadResultados,
+  },
+  props: {
+    cuestionario: {
+      type: Object,
+      required: true,
+    },
+    mezclarRespuestas: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data: () => ({
+    intentos: 0,
+    preguntaSelectedIdx: 0,
+    respuestaActual: {},
+    respuestas: [],
+    continuarDisabled: true,
+    audioEnabled: true,
+    totalPreguntasOriginales: 0,
+  }),
+  computed: {
+    preguntas() {
+      const MAX_PREGUNTAS = 10
+      const { preguntas } = this.cuestionario
+      if (!preguntas) return []
+
+      const preguntasBarajadas = this.shuffle(preguntas)
+
+      const preguntasSeleccionadas =
+        preguntasBarajadas.length >= MAX_PREGUNTAS
+          ? preguntasBarajadas.slice(0, MAX_PREGUNTAS)
+          : preguntasBarajadas
+
+      console.log(
+        'preguntasSeleccionadas',
+        preguntasSeleccionadas,
+        'preguntasBarajadas',
+        preguntasBarajadas,
+      )
+
+      return preguntasSeleccionadas.map(pregunta => ({
+        ...pregunta,
+        opciones: pregunta.barajarRespuestas
+          ? this.shuffle(pregunta.opciones)
+          : pregunta.opciones,
+        intentos: this.intentos,
+      }))
+    },
+    preguntaSelected() {
+      return this.preguntas[this.preguntaSelectedIdx]
+    },
+    porcentajeAprobadas() {
+      if (this.respuestas.length === 0) return 0
+      const aprobadas = this.respuestas.filter(r => r.esCorrecta).length
+      return Math.round((aprobadas / this.respuestas.length) * 100)
+    },
+  },
+  methods: {
+    shuffle(array) {
+      for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1))
+        ;[array[i], array[j]] = [array[j], array[i]]
+      }
+      return array
+    },
+    /*shuffle(array) {
+      let currentIndex = array.length
+      let randomIndex
+      while (currentIndex > 0) {
+        randomIndex = Math.floor(Math.random() * currentIndex)
+        currentIndex--
+        ;[array[currentIndex], array[randomIndex]] = [
+          array[randomIndex],
+          array[currentIndex],
+        ]
+      }
+      return array
+    },*/
+    onRrespuestaSelected(respuestaEsCorrecta) {
+      this.continuarDisabled = false
+      this.respuestaActual = {
+        id: this.preguntaSelected.id,
+        esCorrecta: respuestaEsCorrecta,
+      }
+      if (respuestaEsCorrecta) {
+        this.reproducirSonido(successSound)
+      } else {
+        this.reproducirSonido(failSound)
+      }
+    },
+    onContinuar() {
+      this.continuarDisabled = true
+      if (this.respuestaActual.id) {
+        const idx = this.respuestas.findIndex(
+          r => r.id === this.preguntaSelected.id,
+        )
+        if (idx === -1) {
+          this.respuestas.push(this.respuestaActual)
+        } else {
+          this.respuestas[idx] = this.respuestaActual
+        }
+      }
+
+      if (this.preguntaSelectedIdx < this.preguntas.length - 1) {
+        this.preguntaSelectedIdx += 1
+        this.reproducirSonido(screenChangeSound)
+      } else {
+        this.finalizarPrueba()
+      }
+    },
+    onReiniciar() {
+      this.preguntaSelectedIdx = 0
+      this.respuestas = []
+      this.respuestaActual = {}
+      this.intentos += 1
+      this.$emit('reiniciar')
+    },
+    reproducirSonido(audioSrc) {
+      if (this.audioEnabled) {
+        const audio = new Audio(audioSrc)
+        audio.play()
+      }
+    },
+    finalizarPrueba() {
+      const totalPreguntas = this.preguntas.length
+      const respuestasCorrectas = this.respuestas.filter(r => r.esCorrecta)
+        .length
+      const porcentajeAprobacion = (respuestasCorrectas / totalPreguntas) * 100
+
+      if (porcentajeAprobacion >= 70) {
+        this.reproducirSonido(endGameSuccessSound)
+      } else {
+        this.reproducirSonido(endGameFailSound)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="sass" scoped>
+.boton--disabled
+  opacity: 0.5
+  pointer-events: none
+
+.tarjeta--lightest-gray
+  border: 3px solid #dce4eb
+</style>