.dialogo
.dialogo__header.px-3.px-lg-4.py-2.py-lg-3
.mb-1
slot(name="nombre-actividad") Arrastrar y soltar
.h3.mb-0
slot(name="titulo-actividad") Titulo de actividad - Completa la conversación
.px-2.py-3.p-lg-4
.row.g-0
.col-md-8.dialogo__chat(:ref="`chat-${uid}`")
.row.g-0.flex-nowrap.dialogo__chat__item.mb-3(v-for="(line, lineIdx) in dialogoComputed")
.col-auto.dialogo__chat__item__person
img(:src="line.personaje.img")
span.text-small(v-html="line.personaje.nombre")
.col.dialogo__chat__item__message__container
.dialogo__chat__item__message
.row.g-0.align-items-center.dialogo__chat__item__message__bubble.dialogo__chat__item__message__bubble--tail
.col.dialogo__chat__item__message__text.me-2
.dialogo__chat__item__message__text__eng.h5.mb-0
template(v-for="(phrase, phraseIdx) in line.textoIng")
.d-inline.dialogo__chat__item__message__text__drop(
v-if="phrase === '*'"
@drop.prevent="onDrop(line.id)"
@dragenter.prevent="onDragEnter(line.id)"
@dragleave.prevent="onDragLeave()"
@dragover.prevent
:key="`phrase-${line.id}-${phraseIdx}`"
:ref="`phrase-${line.id}`"
:class="{'is-active': dropId === line.id}"
)
span.dialogo__chat__item__message__text__drop__response(
v-if="answers[line.id]"
v-html="answers[line.id].palabra"
)
span.dialogo__chat__item__message__text__drop__default(v-else)
span(v-else :key="`phrase-${line.id}-${phraseIdx}`" v-html="phrase")
.dialogo__chat__item__message__text__esp.text-small(
v-if="translations.includes(line.id)"
)
hr.my-2
template(v-for="phrase in line.textoEsp")
.d-inline.dialogo__chat__item__message__text__drop(
v-if="phrase === '*'"
)
span.dialogo__chat__item__message__text__drop__default
span(v-else v-html="phrase")
.col-auto.dialogo__chat__item__message__audio
Audio(
:audio="line.audio"
@audio-hover="mostrarIndicadorAudio = false"
)
.d-flex.justify-content-end.me-3
button.dialogo__chat__item__message__translate-btn.text-small(
@click="toggleTranslate(line.id)"
) Ver traducción
.col-1
.col-12.d-md-none
hr.mb-3.mt-4
.col.dialogo__words
.dialogo__words__content
.dialogo__words__content__explanation
slot(name="descripcion-actividad") Arrastra y suelta las palabras en la conversación
.dialogo__words__content__words__container.mt-md-3.mb-3.mb-md-0(v-if="wordsToShow.length")
template(v-if="touchScreen")
.h5.dialogo__words__word(
v-for="word in wordsToShow"
:key="`word-${word.id}`"
:ref="`word-${word.id}`"
@touchstart.prevent="onTouchStart(word.id)"
@touchmove.prevent="onTouchMove($event,word.id)"
@touchend.prevent="onTouchEnd($event,word.id)"
@touchcancel.prevent="onTouchCancel($event,word.id)"
:class="{'grabbing': word.id === dragId}"
v-html="word.palabra"
)
template(v-else)
.h5.dialogo__words__word(
v-for="word in wordsToShow"
:key="`word-${word.id}`"
@dragstart="onStartDrag(word.id)"
@dragend="onEndDrag()"
draggable
:class="{'grabbing': word.id === dragId}"
v-html="word.palabra"
)
.dialogo__words__footer
.dialogo__score.mt-3(v-if="score")
.dialogo__score.p-3.approved(v-if="score === 'approved'")
.row.align-items-center
.col-2
.dialogo__score__icon
img(src="@/assets/template/green-check.svg")
.col
slot.dialogo__score__text.h5.mb-0(name="feedback-correcto") ¡Muy bien!
.dialogo__score.px-3.py-2.disapproved(v-if="score === 'disapproved'")
.row.align-items-center
.col-2
.dialogo__score__icon
img(src="@/assets/template/red-x.svg")
.col
slot.dialogo__score__text.h5.mb-0(name="feedback-incorrecto") Incorrecto
.dialogo__words__footer__actions.text-end.mt-3(
v-if="Object.values(answers).length === words.length"
)
button(v-if="score === null" @click="onCheck") Comprobar
button(v-else-if="score === 'disapproved'" @click="reset") Prueba otra vez