@ecored-sena/base-kit 0.0.1

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

@@ -0,0 +1,116 @@
+<template>
+  <div class="tarjeta-avance">
+    <div class="row align-items-center">
+      <div class="d-none d-md-block col">
+        <div class="tarjeta-avance__barra-container ms-4">
+          <div class="tarjeta-avance__barra" :style="{ width: avanceWidth }" />
+        </div>
+      </div>
+      <div class="col col-md-auto text-center">
+        <span class="lh-1">
+          Pregunta {{ preguntaIndex + 1 }} de {{ preguntasCount }}
+        </span>
+      </div>
+      <div class="col-auto">
+        <div v-if="respuestasLength === preguntasCount" class="py-4"></div>
+        <button
+          v-else-if="respuestasLength === 9"
+          class="boton btn-lg boton--b py-3 px-4"
+          :class="{ 'boton--disabled': continuarDisabled }"
+          @click="$emit('continuar')"
+        >
+          <span>Verificar</span>
+          <i class="fas fa-arrow-right"></i>
+        </button>
+        <button
+          v-else
+          class="boton btn-lg boton--b py-3 px-4"
+          :class="{ 'boton--disabled': continuarDisabled }"
+          @click="$emit('continuar')"
+        >
+          <span>Continuar</span>
+          <i class="fas fa-arrow-right"></i>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ActividadBarraAvance',
+  props: {
+    preguntaIndex: {
+      type: Number,
+      required: true,
+    },
+    preguntasCount: {
+      type: Number,
+      required: true,
+    },
+    continuarDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    respuestasLength: {
+      type: Number,
+      default: 0,
+    },
+    respuestas: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    avanceWidth() {
+      return `${((this.preguntaIndex + 1) / this.preguntasCount) * 100}%`
+    },
+    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
+    },
+  },
+}
+</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>

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

@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <h3 class="mb-4 pb-4">
+      <strong
+        >{{ numeroPregunta }}. <span v-html="pregunta.texto"></span
+      ></strong>
+    </h3>
+    <div class="row align-items-center">
+      <div class="d-none d-md-block col-5">
+        <img :src="pregunta.imagen" alt="" />
+      </div>
+      <div class="col">
+        <div
+          v-for="(respuesta, idx) in opcionesComputed"
+          :key="respuesta.id"
+          class="tarjeta tarjeta--azul tarjeta-respuesta p-4"
+          :class="{
+            'mb-3': idx !== opcionesComputed.length - 1,
+            'tarjeta-respuesta--correcta': respuesta.correcta,
+            'tarjeta-respuesta--incorrecta': respuesta.incorrecta,
+            'tarjeta-respuesta--disabled': respuesta.disabled,
+          }"
+          @click="onRespuestaSelected(respuesta)"
+        >
+          <div class="row align-items-center">
+            <div class="col-auto">
+              <div
+                class="tarjeta-respuesta__icon"
+                :class="[
+                  respuestaSelected.id === respuesta.id
+                    ? respuesta.esCorrecta
+                      ? 'tarjeta-respuesta__icon--correcto'
+                      : 'tarjeta-respuesta__icon--incorrecto'
+                    : '',
+                ]"
+              />
+            </div>
+            <div class="col" v-html="respuesta.texto"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <template v-if="respuestaSelected.id">
+      <hr />
+      <div v-if="respuestaSelected.esCorrecta" class="pt-1">
+        <span class="text-success h3 ma-0">¡Correcto!</span>
+        {{ pregunta.mensaje_correcto }}
+      </div>
+      <div v-else class="pt-1">
+        <span class="text-danger h3 ma-0">¡Incorrecto!</span>
+        {{ pregunta.mensaje_incorrecto }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ActividadPregunta',
+  props: {
+    pregunta: {
+      type: Object,
+      required: true,
+    },
+    numeroPregunta: {
+      type: Number,
+      required: true,
+    },
+  },
+  data: () => ({
+    respuestaSelected: {},
+  }),
+  computed: {
+    opcionesComputed() {
+      if (!this.pregunta.opciones.length) return []
+      const selectedId = this.respuestaSelected.id
+      return this.pregunta.opciones.map(opcion => ({
+        ...opcion,
+        correcta: selectedId === opcion.id && opcion.esCorrecta,
+        incorrecta: selectedId === opcion.id && !opcion.esCorrecta,
+        disabled: !!selectedId,
+      }))
+    },
+  },
+  watch: {
+    pregunta() {
+      this.respuestaSelected = {}
+    },
+  },
+  methods: {
+    onRespuestaSelected(respuesta) {
+      this.respuestaSelected = respuesta
+      this.$emit('respuestaSelected', respuesta.esCorrecta)
+    },
+  },
+}
+</script>
+
+<style lang="sass" scoped>
+img
+  width: auto
+  height: auto
+  display: block
+  margin: auto
+.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/actividadCuestionario/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: '¡Excelente! Ha superado la actividad.',
+    },
+    mensajeReprobado: {
+      type: String,
+      default:
+        'Le recomendamos volver a revisar el componente formativo e intentar nuevamente la actividad didáctica.',
+    },
+    tituloAprobado: {
+      type: String,
+      default: '¡BUEN TRABAJO!',
+    },
+    tituloReprobado: {
+      type: String,
+      default: 'VUELVE 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/audioMixins.js

@@ -0,0 +1,73 @@
+export default {
+  props: {
+    audio: {
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({
+    audioElement: null,
+    audioCanPlay: false,
+    audioDuration: 0,
+    currentTime: 0,
+    state: 'pause',
+  }),
+  computed: {
+    currentTimeDisplay() {
+      return this.getTimeFormated(this.currentTime)
+    },
+    audioDurationDisplay() {
+      return this.getTimeFormated(this.audioDuration)
+    },
+  },
+  mounted() {
+    this.audioElement = this.createAudioElement()
+    this.audioElement.oncanplay = () => {
+      this.audioCanPlay = true
+    }
+    this.audioElement.onloadedmetadata = ({ target }) => {
+      this.audioCanPlay = true
+      this.audioDuration = target.duration
+    }
+    this.audioElement.onended = () => {
+      this.audioElement.currentTime = 0
+      this.state = 'pause'
+    }
+    this.audioElement.ontimeupdate = ({ target }) => {
+      this.currentTime = target.currentTime
+    }
+  },
+  beforeDestroy() {
+    this.audioElement.remove()
+  },
+  methods: {
+    getTimeFormated(time) {
+      const totalSeconds = Math.floor(time)
+      let minutes = Math.floor(totalSeconds / 60)
+      let seconds = totalSeconds % 60
+      minutes = minutes < 10 ? `0${minutes}` : minutes
+      seconds = seconds < 10 ? `0${seconds}` : seconds
+      return `${minutes}:${seconds}`
+    },
+    createAudioElement() {
+      const audioElement = document.createElement('audio')
+      audioElement.setAttribute('preload', 'metadata')
+      audioElement.setAttribute('src', this.audio)
+      document.body.appendChild(audioElement)
+      return audioElement
+    },
+    play() {
+      this.state = 'play'
+      this.audioElement.play()
+    },
+    pause() {
+      this.state = 'pause'
+      this.audioElement.pause()
+    },
+    stop() {
+      this.state = 'pause'
+      this.audioElement.pause()
+      this.audioElement.currentTime = 0
+    },
+  },
+}

package/plugin/components/componentSlotMixins.js

@@ -0,0 +1,87 @@
+export default {
+  data: () => ({
+    mainId: Math.floor(Math.random() * 10 ** 10),
+    selected: 0,
+    elements: [],
+    stateStr: '',
+    rendered: false,
+    firstSelection: true,
+  }),
+  watch: {
+    menuState() {
+      this.domUpdated()
+    },
+  },
+  created() {
+    window.addEventListener('resize', this.domUpdated)
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.crearElementos()
+    })
+  },
+  computed: {
+    menuState() {
+      return this.$store.getters.isMenuOpen
+    },
+    navObj() {
+      if (!this.elements.length || !this.secuencial) return {}
+      const idsArr = this.elements.map(elm => elm.id)
+      const idxOfSelected = idsArr.indexOf(this.selected)
+      if (idxOfSelected < 0) return {}
+
+      const navObj = {}
+      if (idxOfSelected === 0) {
+        navObj.next = idsArr[idxOfSelected + 1]
+      } else if (idxOfSelected + 1 === idsArr.length) {
+        navObj.back = idsArr[idxOfSelected - 1]
+      } else {
+        navObj.next = idsArr[idxOfSelected + 1]
+        navObj.back = idsArr[idxOfSelected - 1]
+      }
+      return navObj
+    },
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.domUpdated)
+  },
+  updated() {
+    this.$nextTick(() => {
+      if (this.getStateStr() != this.stateStr) {
+        this.crearElementos()
+      }
+    })
+  },
+  methods: {
+    crearElementos() {
+      if (!this.$slots.default) return []
+      else if (!this.$slots.default.length) return []
+      this.domUpdated()
+      this.elements = this.$slots.default.map((elemento, index) => {
+        const attributes =
+          elemento.data && elemento.data.attrs ? elemento.data.attrs : []
+        return {
+          id: this.mainId + index + 1,
+          elm: elemento.elm,
+          ...attributes,
+        }
+      })
+      if (this.firstSelection) {
+        this.selected = this.selected > 0 ? this.selected : this.elements[0].id
+      }
+      this.stateStr = this.getStateStr()
+    },
+    getActiveHeight(id) {
+      return this.$refs[id][0].scrollHeight + 'px'
+    },
+    getStateStr() {
+      return this.$slots.default.map(elm => elm.elm.outerHTML).join('')
+    },
+    domUpdated() {
+      this.rendered = false
+      setTimeout(() => {
+        this.rendered = true
+      }, 100)
+    },
+  },
+}

package/plugin/components/dialogoMixins.js

@@ -0,0 +1,28 @@
+export default {
+  data: () => ({
+    uid: Math.floor(Math.random() * 10 ** 10),
+  }),
+  methods: {
+    dialogoMerge(dialogoObj, esActividad = false) {
+      if (!dialogoObj.dialogo) return []
+      return dialogoObj.dialogo.map((line, idx) => ({
+        ...line,
+        id: this.uid + idx + 1,
+        textoIng: esActividad ? this.splitPhrase(line.textoIng) : line.textoIng,
+        textoEsp: esActividad ? this.splitPhrase(line.textoEsp) : line.textoEsp,
+        personaje:
+          dialogoObj.personajes &&
+          dialogoObj.personajes.find(
+            personaje => personaje.nombre === line.personaje,
+          ),
+      }))
+    },
+    splitPhrase(phrase) {
+      return phrase
+        .replace(/^\s+|\s+$/g, ' ')
+        .replace('***', '___*___')
+        .split('___')
+        .filter(Boolean)
+    },
+  },
+}

package/plugin/components/globalMixins.js

@@ -0,0 +1,11 @@
+export default {
+  methods: {
+    obtenerLink(ruta) {
+      const route = window.location.href
+      const separator = route.includes('/index.html#') ? 'index.html#' : '#/'
+      const baseRoute = route.split(separator)[0]
+      const routeEnd = ruta.startsWith('/') ? ruta.substring(1) : ruta
+      return baseRoute + routeEnd
+    },
+  },
+}