Volver

Crear juego

SÍLABAS

Nombre del juego

Tipo plantilla

Cod.HTML juego

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{global_title}}</title>
    {{global_pushmeta}}
    <style>
        /* ====================
           ESTILOS CSS PARA LA INTERFAZ
           ==================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

html {
            height: 100%;
            overflow-y: auto;
        }

body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #2d1b4e 0%, #3d2463 100%);
            display: flex;
            justify-content: center;
            padding: 10px;
            width: 100%;
        }

.container {
            width: 100%;
            max-width: 900px;
            background: #2d1b4e;
            border-radius: 10px;
            overflow: auto;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            touch-action: auto;
        }

.header {
            background: linear-gradient(135deg, #5b4a8a 0%, #4d3d78 100%);
            /*padding: 15px 20px;*/
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            border-bottom: 3px solid #8b7bb8;
        }

.logo-title {
            display: flex;
            align-items: center;
            gap: 10px;
            color: white;
            font-size: 24px;
            font-weight: bold;
        }

.logo-title span {
            font-size: 32px;
        }

.header-controls {
            display: flex;
            padding: 15px 20px;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

.timer {
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 15px;
            border-radius: 25px;
            color: white;
            font-weight: bold;
            font-size: 20px;
            min-width: 100px;
            text-align: center;
        }

.score-display {
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 15px;
            border-radius: 25px;
            color: white;
            font-weight: bold;
            font-size: 14px;
            display: none;
        }

.score-display.active {
            display: block;
        }

button {
            padding: 10px 20px;
            border: none;
            border-radius: 25px;
            font-weight: bold;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

.btn-primary {
            background: #6c349d;
            color: white;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

.btn-primary:hover {
            background: #7a3bb1;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(85, 0, 232, 0.3);
        }

.btn-secondary {
            background: #199f11;
            color: white;
        }

.btn-secondary:hover {
            background: #1eaa16;
        }

.btn-fullscreen {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            width: 40px;
            height: 40px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
        }

.btn-fullscreen:hover {
            background: rgba(255, 255, 255, 0.3);
        }

.btn-info {
            background: rgba(0, 168, 232, 0.7);
            color: white;
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: 50%;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.btn-info:hover {
            background: #00a8e8;
        }

.content {
            padding: 20px;
            min-height: auto;
            overflow: visible;
            touch-action: auto;
            background:linear-gradient(135deg, {{color_fondo1}} 0%, {{color_fondo2}} 100%);
        }

.blocks-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

@media (min-width: 600px) {
            .blocks-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

@media (max-width: 599px) {
            .blocks-grid {
                grid-template-columns: 1fr;
            }
        }

.block {
            background: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

.block-image {
            width: auto;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 65px;
        }

.syllables-section {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

.drop-zones {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
            gap: 12px;
            width: 100%;
        }

.drop-zone {
            background: rgba(255, 193, 7, 0.3);
            border: 3px dashed #ffc107;
            border-radius: 8px;
            min-height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

.drop-zone:hover {
            background: rgba(255, 193, 7, 0.5);
            border-color: #ff9800;
        }

.drop-zone.occupied {
            background: rgba(76, 175, 80, 0.2);
            border-color: #4CAF50;
        }

.drop-zone.drag-over {
            background: rgba(255, 193, 7, 0.7);
            border-color: #ff6f00;
            box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
        }

.drop-zone .syllable {
            margin: 0;
        }

.syllables-source {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
            min-height: 60px;
        }

.syllable {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            padding: 12px 18px;
            border-radius: 8px;
            cursor: grab;
            font-weight: bold;
            font-size: 22px;
            user-select: none;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            touch-action: none;
        }

.syllable:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

.syllable.dragging {
            opacity: 0.5;
            cursor: grabbing;
            border: 3px solid #00e676;
            box-shadow: 0 0 15px rgba(0, 230, 118, 0.6);
        }

.syllable.placed {
            background: #9e9e9e;
        }
        
        .draggable-clone {
            position: fixed;
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            font-weight: bold;
            pointer-events: none;
            z-index: 9999;
            border: 3px solid #7ed321;
            box-shadow: 0 0 15px rgba(126, 211, 33, 0.6);
        }

.feedback-icon {
            position: absolute;
            top: -8px;
            right: -8px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: bold;
            display: none;
        }

.feedback-icon.correct {
            background: #4CAF50;
            color: white;
            display: flex;
        }

.feedback-icon.incorrect {
            background: #f44336;
            color: white;
            display: flex;
        }

.overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            touch-action: none;
        }

.overlay.active {
            opacity: 1;
            pointer-events: all;
        }

.modal {
            background: white;
            padding: 40px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            max-width: 90%;
        }

.modal h2 {
            color: #2d1b4e;
            margin-bottom: 20px;
            font-size: 32px;
        }

.modal-message {
            color: #555;
            margin: 15px 0 20px 0;
            font-size: 16px;
            font-weight: bold;
        }

.modal p {
            color: #555;
            margin: 10px 0;
            font-size: 18px;
        }

.modal button {
            margin-top: 20px;
        }

.footer {
            background: rgba(0, 0, 0, 0.3);
            padding: 15px 20px;
            text-align: center;
            color: white;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border-top: 2px solid #8b7bb8;
        }

.footer-logo {
            width: 95%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

/* Config panel */
        .info-panel {
            position: fixed;
            top: 0;
            right: -400px;
            width: 350px;
            height: 100%;
            background: white;
            box-shadow: -5px 0 15px rgba(0,0,0,0.3);
            transition: right 0.3s;
            z-index: 999;
            padding: 20px;
            overflow-y: auto;
        }

.info-panel.open {
            right: 0;
        }

.info-panel h3 {
            color: #1e3a8a;
            margin-bottom: 15px;
        }

.info-panel p {
            margin-bottom: 10px;
            line-height: 1.6;
        }

.btn-info {
            background: #3b82f6;
            color: white;
            width: 40px;
            height: 40px;
            padding: 8px;
            border-radius: 8px;
            cursor: pointer;
            border: none;
            font-size: 20px;
        }

.btn-close-info {
            background: #ef4444;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            margin-top: 15px;
        }

@media (max-width: 768px) {
            .header {
                padding: 12px 15px;
            }

.container {
                max-width: 100%;
                border-radius: 0;
            }

.content {
                padding: 15px;
            }

.logo-title {
                font-size: 20px;
            }

.block {
                padding: 12px;
                gap: 12px;
            }

button {
                padding: 8px 15px;
                font-size: 14px;
            }

.modal {
                padding: 30px 20px;
            }

.modal h2 {
                font-size: 24px;
            }

.syllable {
                padding: 10px 16px;
                font-size: 18px;
            }

.drop-zone {
                min-height: 60px;
            }

.syllables-source {
                min-height: 50px;
            }

.info-panel {
                width: 100%;
                right: -100%;
            }
        }
    </style>
    <style>
        /* ====================
           ESTILOS CSS PARA LA PANTALLA DE RESULTADO Y PUNTAJE
           ==================== */
                
        /* Contenedor principal de la pantalla de puntuación */
        #puntuacionFinal {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro con transparencia */
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 900;
            opacity: 0; /* Controlado por JS para transiciones */
            transition: opacity 0.5s ease;
            pointer-events: none; /* No permite interacción cuando está oculto */
            border-radius:25px;
        }

.puntuacionfinal-hidden {
            display: none !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

.puntuacionfinal-active {
            opacity: 1 !important;
            pointer-events: auto !important;
        }

/* Contenido central de la puntuación */
        .contenido-puntuacion {
            /*background-color: #333;*/
            padding: 50px;
            margin: 50px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 0 40px rgba(200, 20, 200, 0.7); /* Sombra */
            z-index: 901;
            position: relative;
            transform: scale(0.9);
            animation: zoomIn-contenido-puntuacion 0.5s forwards; /* Animacion*/
        }
        
        @keyframes zoomIn-contenido-puntuacion {
            to { transform: scale(1); }
        }

.mensaje-puntuacion {
            font-size: 2.0em;
            color: #fefefe;
            margin-bottom: 25px;
            text-shadow: 3px 3px 6px #000;
        }

.trofeo-icon {
            font-size: 8em;
            margin: 25px 0;
            line-height: 1;
            /* Animación de rebote para el trofeo */
            animation: bounce-trofeo 1s infinite alternate; 
        }

.puntos-label {
            font-size: 1.5em;
            color: #dedede;
            margin-bottom: 5px;
        }

.puntos-contador {
            font-size: 6em;
            color: #9762ce; /* Color Vistoso */
            font-weight: 900;
            margin-top: 0;
            min-height: 1.2em;
        }

/* Keyframes para el rebote del trofeo */
        @keyframes bounce-trofeo {
            from { transform: translateY(0); }
            to { transform: translateY(-20px); }
        }

/* -------------------
           Animación de Confeti (Mixtura)
           ------------------- */
        .confetti-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            z-index: 899;
        }

/* Estilo para los elementos de confeti, generados dinámicamente */
        .confetti {
            position: absolute;
            width: 8px;
            height: 15px;
            opacity: 0;
            background-color: white; /* Color por defecto, será sobrescrito */
            transform-origin: center;
            animation: fall-confetti linear infinite;
        }
        
        /* Keyframes para la caída y rotación del confeti */
        @keyframes fall-confetti {
            0% {
                transform: translate(0, -100px) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            100% {
                transform: translate(0, 100vh) rotate(1000deg);
                opacity: 0;
            }
        }

.score-details {
            display: flex;
            justify-content: center;
            gap: 30px;
            flex-wrap: wrap;
        }

.score-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

.score-label {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 5px;
        }

.score-value {
            font-size: 32px;
            font-weight: bold;
            color: #fff;
        }
    </style>
</head>
<body>
    
    <div id="infoPanel" class="info-panel">
        {{textarea_informaciones}}
        <button class="btn-close-info" onclick="toggleInfo()">Cerrar</button>
    </div>
    
    <div class="container">
        <div class="header">
            <div class="logo-title" style="position: relative;">
                <span><img src="{{global_logofofu}}" style="width: 100px;height: 59px;padding-top: 6px;padding-left: 6px;"></span>
            </div>
            <div class="header-controls">
                <div class="timer" id="timer">00:00:00</div>
                <div class="score-display" id="scoreDisplay"></div>
                <button class="btn-primary" id="pauseBtn" onclick="togglePause()" style="display:none;">
                    ⏸ PAUSAR
                </button>
                <button class="btn-secondary" id="checkBtn" onclick="checkAnswers()" style="display:none;">
                    ✓ REVISAR
                </button>
                <button class="btn-fullscreen" onclick="toggleFullscreen()">⛶</button>
                <button class="btn-info" onclick="toggleInfo()">☰</button>
            </div>
        </div>

<div id="puntuacionFinal" class="puntuacionfinal-hidden">
            <div class="confetti-container" id="confettiContainer"></div>
            <div class="contenido-puntuacion">
                <div class="mensaje-puntuacion" id="mensaje-puntuacion">HAS GANADO, lo hiciste muy bien 🎉</div>
                <div class="trofeo-icon" id="trofeo-icon">🏆</div> {{textarea_titulojuego}} <p class="puntos-label">Puntos Obtenidos:</p>
                <div id="puntosContador" class="puntos-contador">0</div>
                <div class="score-details">
                    <div class="score-item">
                        <div class="score-label">PUNTAJE</div>
                        <div id="mensaje-puntaje" class="score-value">50/100</div>
                    </div>
                    <div class="score-item">
                        <div class="score-label">TIEMPO</div>
                        <div id="mensaje-tiempo" class="score-value">00:00:00</div>
                    </div>
                </div>
                <br>
                <button onclick="javascript:resetGame()" class="btn-secondary">🔄 REINTENTAR</button>
            </div>
        </div>
	
        <div class="overlay" id="startOverlay">
            <div class="modal">
                {{textarea_titulojuego}}
                {{textarea_instrucciones}}
                <button class="btn-primary" onclick="startGame()">
                    ▶ COMENZAR
                </button>
            </div>
        </div>

<div class="overlay" id="pauseOverlay">
            <div class="modal">
                <h2>PAUSA</h2>
                <button class="btn-primary" onclick="togglePause()">
                    ▶ CONTINUAR
                </button>
            </div>
        </div>

<div class="content" id="content" style="display:none;">
            <div style="width:95%;color:#ffffff;text-align:center;padding-bottom:15px;">
                {{textarea_titulojuego}}
                {{textarea_instrucciones}}
            </div>
            <div class="blocks-grid" id="blocksContainer"></div>
        </div>

<div class="footer">
            <div class="footer-logo"><img src="{{global_logofofu}}" style="width:100px;height:59px;"></div>
            <span><a target="_blank" href="https://fofueduca.com" style="color:#ffffff;">fofueduca.com</a></span>
        </div>
    </div>

<div style="display:none;">
        <audio id="reproductorAudioPop" controls>
            <source src="{{global_audiopop}}" type="audio/ogg">
        </audio>
    </div>
                                                            
    <script>
        // Datos del juego
        let gameNumberData = {{text_cantidad_datos}};//1 a 10
        
        const gameData = [
            { count: {{text_count1}}, image: '{{img_palabra1}}', syllables: ['{{text_silaba_1_1}}', '{{text_silaba_1_2}}', '{{text_silaba_1_3}}', '{{text_silaba_1_4}}', '{{text_silaba_1_5}}', '{{text_silaba_1_6}}', '{{text_silaba_1_7}}', '{{text_silaba_1_8}}', '{{text_silaba_1_9}}', '{{text_silaba_1_10}}'], correct: ['{{text_silaba_1_1}}', '{{text_silaba_1_2}}', '{{text_silaba_1_3}}', '{{text_silaba_1_4}}', '{{text_silaba_1_5}}', '{{text_silaba_1_6}}', '{{text_silaba_1_7}}', '{{text_silaba_1_8}}', '{{text_silaba_1_9}}', '{{text_silaba_1_10}}'] },
            { count: {{text_count2}}, image: '{{img_palabra2}}', syllables: ['{{text_silaba_2_1}}', '{{text_silaba_2_2}}', '{{text_silaba_2_3}}', '{{text_silaba_2_4}}', '{{text_silaba_2_5}}', '{{text_silaba_2_6}}', '{{text_silaba_2_7}}', '{{text_silaba_2_8}}', '{{text_silaba_2_9}}', '{{text_silaba_2_10}}'], correct: ['{{text_silaba_2_1}}', '{{text_silaba_2_2}}', '{{text_silaba_2_3}}', '{{text_silaba_2_4}}', '{{text_silaba_2_5}}', '{{text_silaba_2_6}}', '{{text_silaba_2_7}}', '{{text_silaba_2_8}}', '{{text_silaba_2_9}}', '{{text_silaba_2_10}}'] },
            { count: {{text_count3}}, image: '{{img_palabra3}}', syllables: ['{{text_silaba_3_1}}', '{{text_silaba_3_2}}', '{{text_silaba_3_3}}', '{{text_silaba_3_4}}', '{{text_silaba_3_5}}', '{{text_silaba_3_6}}', '{{text_silaba_3_7}}', '{{text_silaba_3_8}}', '{{text_silaba_3_9}}', '{{text_silaba_3_10}}'], correct: ['{{text_silaba_3_1}}', '{{text_silaba_3_2}}', '{{text_silaba_3_3}}', '{{text_silaba_3_4}}', '{{text_silaba_3_5}}', '{{text_silaba_3_6}}', '{{text_silaba_3_7}}', '{{text_silaba_3_8}}', '{{text_silaba_3_9}}', '{{text_silaba_3_10}}'] },
            { count: {{text_count4}}, image: '{{img_palabra4}}', syllables: ['{{text_silaba_4_1}}', '{{text_silaba_4_2}}', '{{text_silaba_4_3}}', '{{text_silaba_4_4}}', '{{text_silaba_4_5}}', '{{text_silaba_4_6}}', '{{text_silaba_4_7}}', '{{text_silaba_4_8}}', '{{text_silaba_4_9}}', '{{text_silaba_4_10}}'], correct: ['{{text_silaba_4_1}}', '{{text_silaba_4_2}}', '{{text_silaba_4_3}}', '{{text_silaba_4_4}}', '{{text_silaba_4_5}}', '{{text_silaba_4_6}}', '{{text_silaba_4_7}}', '{{text_silaba_4_8}}', '{{text_silaba_4_9}}', '{{text_silaba_4_10}}'] },
            { count: {{text_count5}}, image: '{{img_palabra5}}', syllables: ['{{text_silaba_5_1}}', '{{text_silaba_5_2}}', '{{text_silaba_5_3}}', '{{text_silaba_5_4}}', '{{text_silaba_5_5}}', '{{text_silaba_5_6}}', '{{text_silaba_5_7}}', '{{text_silaba_5_8}}', '{{text_silaba_5_9}}', '{{text_silaba_5_10}}'], correct: ['{{text_silaba_5_1}}', '{{text_silaba_5_2}}', '{{text_silaba_5_3}}', '{{text_silaba_5_4}}', '{{text_silaba_5_5}}', '{{text_silaba_5_6}}', '{{text_silaba_5_7}}', '{{text_silaba_5_8}}', '{{text_silaba_5_9}}', '{{text_silaba_5_10}}'] },
            { count: {{text_count6}}, image: '{{img_palabra6}}', syllables: ['{{text_silaba_6_1}}', '{{text_silaba_6_2}}', '{{text_silaba_6_3}}', '{{text_silaba_6_4}}', '{{text_silaba_6_5}}', '{{text_silaba_6_6}}', '{{text_silaba_6_7}}', '{{text_silaba_6_8}}', '{{text_silaba_6_9}}', '{{text_silaba_6_10}}'], correct: ['{{text_silaba_6_1}}', '{{text_silaba_6_2}}', '{{text_silaba_6_3}}', '{{text_silaba_6_4}}', '{{text_silaba_6_5}}', '{{text_silaba_6_6}}', '{{text_silaba_6_7}}', '{{text_silaba_6_8}}', '{{text_silaba_6_9}}', '{{text_silaba_6_10}}'] },
            { count: {{text_count7}}, image: '{{img_palabra7}}', syllables: ['{{text_silaba_7_1}}', '{{text_silaba_7_2}}', '{{text_silaba_7_3}}', '{{text_silaba_7_4}}', '{{text_silaba_7_5}}', '{{text_silaba_7_6}}', '{{text_silaba_7_7}}', '{{text_silaba_7_8}}', '{{text_silaba_7_9}}', '{{text_silaba_7_10}}'], correct: ['{{text_silaba_7_1}}', '{{text_silaba_7_2}}', '{{text_silaba_7_3}}', '{{text_silaba_7_4}}', '{{text_silaba_7_5}}', '{{text_silaba_7_6}}', '{{text_silaba_7_7}}', '{{text_silaba_7_8}}', '{{text_silaba_7_9}}', '{{text_silaba_7_10}}'] },
            { count: {{text_count8}}, image: '{{img_palabra8}}', syllables: ['{{text_silaba_8_1}}', '{{text_silaba_8_2}}', '{{text_silaba_8_3}}', '{{text_silaba_8_4}}', '{{text_silaba_8_5}}', '{{text_silaba_8_6}}', '{{text_silaba_8_7}}', '{{text_silaba_8_8}}', '{{text_silaba_8_9}}', '{{text_silaba_8_10}}'], correct: ['{{text_silaba_8_1}}', '{{text_silaba_8_2}}', '{{text_silaba_8_3}}', '{{text_silaba_8_4}}', '{{text_silaba_8_5}}', '{{text_silaba_8_6}}', '{{text_silaba_8_7}}', '{{text_silaba_8_8}}', '{{text_silaba_8_9}}', '{{text_silaba_8_10}}'] },
            { count: {{text_count9}}, image: '{{img_palabra9}}', syllables: ['{{text_silaba_9_1}}', '{{text_silaba_9_2}}', '{{text_silaba_9_3}}', '{{text_silaba_9_4}}', '{{text_silaba_9_5}}', '{{text_silaba_9_6}}', '{{text_silaba_9_7}}', '{{text_silaba_9_8}}', '{{text_silaba_9_9}}', '{{text_silaba_9_10}}'], correct: ['{{text_silaba_9_1}}', '{{text_silaba_9_2}}', '{{text_silaba_9_3}}', '{{text_silaba_9_4}}', '{{text_silaba_9_5}}', '{{text_silaba_9_6}}', '{{text_silaba_9_7}}', '{{text_silaba_9_8}}', '{{text_silaba_9_9}}', '{{text_silaba_9_10}}'] },
            { count: {{text_count10}}, image: '{{img_palabra10}}', syllables: ['{{text_silaba_10_1}}', '{{text_silaba_10_2}}', '{{text_silaba_10_3}}', '{{text_silaba_10_4}}', '{{text_silaba_10_5}}', '{{text_silaba_10_6}}', '{{text_silaba_10_7}}', '{{text_silaba_10_8}}', '{{text_silaba_10_9}}', '{{text_silaba_10_10}}'], correct: ['{{text_silaba_10_1}}', '{{text_silaba_10_2}}', '{{text_silaba_10_3}}', '{{text_silaba_10_4}}', '{{text_silaba_10_5}}', '{{text_silaba_10_6}}', '{{text_silaba_10_7}}', '{{text_silaba_10_8}}', '{{text_silaba_10_9}}', '{{text_silaba_10_10}}'] }
        ];

let gameState = {
            started: false,
            paused: false,
            checked: false,
            timerInterval: null,
            seconds: 0,
            placements: {},
            score: 0
        };

let draggedElement = null;
        let touchStartX = 0;
        let touchStartY = 0;

// Inicialización
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('startOverlay').classList.add('active');
        });

function shuffleArray(array) {
            const shuffled = [...array];
            for (let i = shuffled.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
            }
            return shuffled;
        }

function startGame() {
            gameState.started = true;
            gameState.paused = false;
            gameState.checked = false;
            gameState.seconds = 0;
            gameState.placements = {};
            gameState.score = 0;

document.getElementById('startOverlay').classList.remove('active');
            document.getElementById('content').style.display = 'block';
            document.getElementById('pauseBtn').style.display = 'flex';
            document.getElementById('checkBtn').style.display = 'flex';
            document.getElementById('scoreDisplay').classList.remove('active');

renderBlocks();
            startTimer();
        }

function renderBlocks() {
            const container = document.getElementById('blocksContainer');
            container.innerHTML = '';

gameData.slice(0,gameNumberData).forEach((data, blockIndex) => {
                const block = document.createElement('div');
                block.className = 'block';

const image = document.createElement('div');
                image.className = 'block-image';
                //image.textContent = data.image;
                if(data.image.includes('.'))image.innerHTML = "<img style='width:100%;height:100%;' src='"+data.image+"'>";
                else image.textContent = data.image;

const syllablesSection = document.createElement('div');
                syllablesSection.className = 'syllables-section';

// Crear zonas de caída primero
                const dropZones = document.createElement('div');
                dropZones.className = 'drop-zones';
                dropZones.id = `zones-${blockIndex}`;

//for (let i = 0; i < data.correct.length; i++) {
                for (let i = 0; i < data.count; i++) {
                    const zone = document.createElement('div');
                    zone.className = 'drop-zone';
                    zone.id = `zone-${blockIndex}-${i}`;
                    zone.dataset.blockIndex = blockIndex;
                    zone.dataset.zoneIndex = i;

zone.addEventListener('dragover', handleDragOver);
                    zone.addEventListener('drop', handleDrop);
                    zone.addEventListener('dragleave', handleDragLeave);

dropZones.appendChild(zone);
                }

// Luego crear sílabas (mezcla aleatoria)
                const shuffledSyllables = shuffleSyllables(data.syllables.slice(0,data.count), data.correct.slice(0,data.count));
                
                const syllablesSource = document.createElement('div');
                syllablesSource.className = 'syllables-source';
                syllablesSource.id = `source-${blockIndex}`;

shuffledSyllables.forEach((syl, sylIndex) => {
                    const syllDiv = document.createElement('div');
                    syllDiv.className = 'syllable';
                    syllDiv.textContent = syl;
                    syllDiv.id = `syl-${blockIndex}-${sylIndex}`;
                    syllDiv.draggable = true;
                    syllDiv.dataset.blockIndex = blockIndex;
                    syllDiv.dataset.sylIndex = sylIndex;
                    syllDiv.dataset.syllable = syl;

// Eventos para drag and drop
                    syllDiv.addEventListener('dragstart', handleDragStart);
                    syllDiv.addEventListener('dragend', handleDragEnd);
                    
                    // Eventos para touch
                    syllDiv.addEventListener('touchstart', handleTouchStart);
                    syllDiv.addEventListener('touchmove', handleTouchMove);
                    syllDiv.addEventListener('touchend', handleTouchEnd);
                    
                    // Click para devolver a origen
                    syllDiv.addEventListener('click', (e) => {
	                if(gameState.checked==false){
                            if (syllDiv.classList.contains('placed')) {
                                returnSyllableToSource(syllDiv);
                            }
                        }
                    });

syllablesSource.appendChild(syllDiv);
                });

syllablesSection.appendChild(dropZones);
                syllablesSection.appendChild(syllablesSource);

block.appendChild(image);
                block.appendChild(syllablesSection);
                container.appendChild(block);
            });
        }

function handleDragStart(e) {
            if (gameState.paused || gameState.checked) return;
            draggedElement = this;
            this.classList.add('dragging');
            e.dataTransfer.effectAllowed = 'move';
        }

function handleDragEnd(e) {
            this.classList.remove('dragging');
            draggedElement = null;
            document.querySelectorAll('.drop-zone').forEach(z => z.classList.remove('drag-over'));
            
            document.getElementById('reproductorAudioPop').play();
        }

function handleDragOver(e) {
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';
            this.classList.add('drag-over');
        }

function handleDragLeave(e) {
            if (e.target === this) {
                this.classList.remove('drag-over');
            }
        }

function handleDrop(e) {
            e.preventDefault();
            this.classList.remove('drag-over');

if (!draggedElement) return;
            dropSyllable(this, draggedElement);
        }

// Elemento clonado
        let clonedElement = null;

function handleTouchStart(e) {
            if (gameState.paused || gameState.checked) return;
            draggedElement = this;
            touchStartX = e.touches[0].clientX;
            touchStartY = e.touches[0].clientY;
            this.classList.add('dragging');

// Crear elemento clonado
            clonedElement = document.createElement('div');
            clonedElement.className = 'draggable-clone';
            clonedElement.textContent = e.target.textContent;
            clonedElement.style.left = touchStartX - 35 + 'px';
            clonedElement.style.top = touchStartY - 35 + 'px';
            
            document.body.appendChild(clonedElement);
        }

function handleTouchMove(e) {
            if (!draggedElement) return;
            e.preventDefault();

const touchX = e.touches[0].clientX;
            const touchY = e.touches[0].clientY;

// Actualizar posición del elemento clonado
            if (clonedElement) {
                clonedElement.style.left = touchX - 35 + 'px';
                clonedElement.style.top = touchY - 35 + 'px';
            }

// Buscar zona de caída bajo el dedo
            const zone = document.elementFromPoint(touchX, touchY);
            if (zone && zone.classList.contains('drop-zone')) {
                document.querySelectorAll('.drop-zone').forEach(z => z.classList.remove('drag-over'));
                zone.classList.add('drag-over');
            } else {
                document.querySelectorAll('.drop-zone').forEach(z => z.classList.remove('drag-over'));
            }

}

function handleTouchEnd(e) {
            if (!draggedElement) return;

const touchX = e.changedTouches[0].clientX;
            const touchY = e.changedTouches[0].clientY;

// Buscar zona de caída bajo el dedo
            const zone = document.elementFromPoint(touchX, touchY);
            
            this.classList.remove('dragging');
            document.querySelectorAll('.drop-zone').forEach(z => z.classList.remove('drag-over'));

if (zone && zone.classList.contains('drop-zone')) {
                dropSyllable(zone, draggedElement);
            }

draggedElement = null;

// Eliminar elemento clonado
            if (clonedElement) {
                clonedElement.remove();
                clonedElement = null;
            }
            
            document.getElementById('reproductorAudioPop').play();
        }

function dropSyllable(zone, syllable) {
            const blockIndex = zone.dataset.blockIndex;
            const zoneIndex = zone.dataset.zoneIndex;
            const zoneId = zone.id;

// Si la zona ya tiene algo, devolver el elemento que estaba allí
            if (zone.children.length > 0) {
                const existingSyl = zone.children[0];
                if (existingSyl.classList.contains('syllable')) {
                    returnSyllableToSource(existingSyl);
                }
            }

// Si el elemento ya está en otra zona, sacarlo de allí
            if (syllable.classList.contains('placed') && syllable.parentElement) {
                if (syllable.parentElement.classList.contains('drop-zone')) {
                    const oldZone = syllable.parentElement;
                    const oldZoneId = oldZone.id;
                    oldZone.classList.remove('occupied');
                    oldZone.removeChild(syllable);
                    delete gameState.placements[oldZoneId];
                }
            }

// Colocar el elemento en la nueva zona
            syllable.classList.add('placed');
            zone.appendChild(syllable);
            zone.classList.add('occupied');

gameState.placements[zoneId] = {
                blockIndex,
                zoneIndex,
                syllable: syllable.dataset.syllable
            };
        }

function returnSyllableToSource(syllElement) {
            const blockIndex = syllElement.dataset.blockIndex;
            const sourceContainer = document.getElementById(`source-${blockIndex}`);

// Remover de su zona actual
            if (syllElement.parentElement && syllElement.parentElement.classList.contains('drop-zone')) {
                syllElement.parentElement.classList.remove('occupied');
                const parent = syllElement.parentElement;
                const zoneId = parent.id;
                delete gameState.placements[zoneId];
                parent.removeChild(syllElement);
            }

syllElement.classList.remove('placed');
            if (sourceContainer) {
                sourceContainer.appendChild(syllElement);
            }
        }

function togglePause() {
            if (!gameState.started || gameState.checked) return;

gameState.paused = !gameState.paused;
            document.getElementById('pauseOverlay').classList.toggle('active', gameState.paused);

if (gameState.paused) {
                clearInterval(gameState.timerInterval);
            } else {
                startTimer();
            }
        }

function checkAnswers() {
            if (!gameState.started) return;

gameState.checked = true;
            clearInterval(gameState.timerInterval);
            document.getElementById('pauseBtn').style.display = 'none';
            document.getElementById('checkBtn').style.display = 'none';

let score = 0;
            let max_score = 0;
            let score_correct=0;
            let score_incorrect=0;
            let not_placed=0;

gameData.slice(0,gameNumberData).forEach((data, blockIndex) => {
                max_score=max_score+data.count;
                data.correct.slice(0,data.count).forEach((correctSyl, zoneIndex) => {
                    const zoneId = `zone-${blockIndex}-${zoneIndex}`;
                    const placement = gameState.placements[zoneId];
                    const isCorrect = placement && placement.syllable === correctSyl;

if (placement) {
                        const zone = document.getElementById(zoneId);
                        const feedbackIcon = zone.querySelector('.feedback-icon') || document.createElement('div');
                        feedbackIcon.className = 'feedback-icon';

if (isCorrect) {
                            feedbackIcon.classList.add('correct');
                            feedbackIcon.innerHTML = '✓';
                            score_correct++;
                        } else {
                            feedbackIcon.classList.add('incorrect');
                            feedbackIcon.innerHTML = '✗';
                            score_incorrect++;
                        }

if (!zone.querySelector('.feedback-icon')) {
                            zone.appendChild(feedbackIcon);
                        }
                    } else {
                        not_placed++;
                    }
                });
            });
	    //Subtract correct minus incorrect
            score=score_correct-score_incorrect;
            gameState.score = score;
            const maxScore = max_score;
            const timeStr = formatTime(gameState.seconds);

document.getElementById('scoreDisplay').classList.add('active');
            document.getElementById('scoreDisplay').textContent = `Puntaje: ${gameState.score}/${maxScore} | Tiempo: ${timeStr}`;

// Determinar mensaje según puntaje
            let message = '';
            let trofeo='';
            if (gameState.score === maxScore) {
                message = '{{text_feedback1}}';
                trofeo='🏆';
            } else if (gameState.score > maxScore / 2) {
                message = '{{text_feedback2}}';
                trofeo='⭐';
            } else {
                message = '{{text_feedback3}}';
                trofeo='🤲';
            }

// Mostrar mensaje debajo del menu
            mostrarPuntuacion(message,gameState.score,maxScore,timeStr,trofeo);
        }

function resetGame() {
	    // Limpiar elemento clonado si existe
            if (clonedElement) {
                clonedElement.remove();
            }
            gameState = {
                started: false,
                paused: false,
                checked: false,
                timerInterval: null,
                seconds: 0,
                placements: {},
                score: 0
            };

document.getElementById('content').style.display = 'none';
            document.getElementById('pauseBtn').style.display = 'none';
            document.getElementById('checkBtn').style.display = 'none';
            document.getElementById('scoreDisplay').classList.remove('active');
            document.getElementById('pauseOverlay').classList.remove('active');
            document.getElementById('timer').textContent = '00:00:00';

ocultarPuntuacion();

document.getElementById('startOverlay').classList.add('active');
        }

function startTimer() {
            gameState.timerInterval = setInterval(() => {
                gameState.seconds++;
                document.getElementById('timer').textContent = formatTime(gameState.seconds);
            }, 1000);
        }

let contadorAnimationFrame = null; // Para el contador de puntos
            let confetis = [];

// Colores para el confeti
            const confettiColors = ['#ffc107', '#17a2b8', '#dc3545', '#28a745', '#6f42c1', '#fd7e14'];

/**
             * Anima el contador numérico de 0 a la meta final.
             * Utiliza requestAnimationFrame para una animación suave.
             */
            function animarContador(meta) {
                const timestampInicio = performance.now();

function actualizarContador(timestampActual) {
                    const tiempoTranscurrido = timestampActual - timestampInicio;
                    const progreso = Math.min(1, tiempoTranscurrido / DURACION_CONTADOR_MS);
                    const valorActual = Math.floor(progreso * meta);
                    
                    puntosContador.textContent = valorActual;

if (progreso < 1) {
                        contadorAnimationFrame = requestAnimationFrame(actualizarContador);
                    } else {
                        puntosContador.textContent = meta; // Asegura el valor exacto al final
                    }
                }

contadorAnimationFrame = requestAnimationFrame(actualizarContador);
            }

/**
             * Crea un elemento de confeti con propiedades de estilo aleatorias.
             */
            function crearConfeti() {
                const confeti = document.createElement('div');
                confeti.classList.add('confetti');
                
                const randomColor = confettiColors[Math.floor(Math.random() * confettiColors.length)];
                const randomLeft = Math.random() * 100; // Posición horizontal (0-100% viewport width)
                const randomDuration = Math.random() * 3 + 2; // Duración de 2s a 5s
                const randomDelay = Math.random() * 2; // Retraso de 0s a 2s
                const randomSize = Math.random() * 8 + 7; // Tamaño de 7px a 15px

confeti.style.backgroundColor = randomColor;
                confeti.style.width = `${randomSize}px`;
                confeti.style.height = `${randomSize / 2}px`; /* Rectangular */
                confeti.style.left = `${randomLeft}vw`;
                confeti.style.animationDuration = `${randomDuration}s`;
                confeti.style.animationDelay = `${randomDelay}s`;

confettiContainer.appendChild(confeti);
                confetis.push(confeti);
            }
            
            /**
             * Inicia la animación de confeti creando los elementos.
             */
            function iniciarConfeti() {
                for (let i = 0; i < NUM_CONFETIS; i++) {
                    crearConfeti();
                }
            }

/**
             * Detiene todas las animaciones, limpia los elementos y oculta la pantalla.
             */
            function ocultarPuntuacion() {
                // 1. Detener el contador
                if (contadorAnimationFrame !== null) {
                    cancelAnimationFrame(contadorAnimationFrame);
                    contadorAnimationFrame = null;
                }
                // 2. Remover los elementos de confeti (detiene su animación CSS)
                confetis.forEach(c => c.remove());
                confetis = [];
                // 3. Ocultar la pantalla de puntuación
                puntuacionFinal.classList.remove('puntuacionfinal-active');
                puntuacionFinal.classList.add('puntuacionfinal-hidden');
                // 4. Resetear el contador visual
                puntosContador.textContent = '0'; 
            }

// Evento para mostrar la puntuación
            function mostrarPuntuacion(x_message,x_score,x_maxScore,x_timeStr,x_trofeo){
                // Limpiar y resetear antes de mostrar para asegurar un inicio limpio
                ocultarPuntuacion(); 
                document.getElementById('mensaje-puntuacion').innerHTML=x_message;
                document.getElementById('mensaje-puntaje').innerHTML=x_score+"/"+x_maxScore;
                document.getElementById('mensaje-tiempo').innerHTML=x_timeStr;
                document.getElementById('trofeo-icon').innerHTML=x_trofeo;
                puntuacionFinal.classList.remove('puntuacionfinal-hidden');
                // Un pequeño retardo para asegurar que la clase puntuacionfinal-hidden se remueva antes de aplicar active
                setTimeout(() => {
                    puntuacionFinal.classList.add('puntuacionfinal-active');
                    // Iniciar las animaciones
                    animarContador(x_score);
                    iniciarConfeti();
                }, 10);
            }
    </script>
</body>
</html>

Cod.HTML form

<div class="form-group">
            <label for="textarea_titulojuego">Título del juego</label>
            <xtextarea name="textarea_titulojuego" id="textarea_titulojuego" class="form-control" rows="7" style="width:100%;">{{textarea_titulojuego}}</xtextarea>
        </div>

<div class="form-group">
            <label for="textarea_instrucciones">Instrucciones del juego</label>
            <xtextarea name="textarea_instrucciones" id="textarea_instrucciones" class="form-control" rows="7" style="width:100%;">{{textarea_instrucciones}}</xtextarea>
        </div>

<div class="form-group">
            <label for="textarea_informaciones">Información del juego</label>
            <xtextarea name="textarea_informaciones" id="textarea_informaciones" class="form-control" rows="7" style="width:100%;">{{textarea_informaciones}}</xtextarea>
        </div>

<div class="form-group" style="margin-top:5px;text-align:center;">
    	    <label for="text_cantidad_datos">Cantidad de palabras a usar:</label>
            <select name="text_cantidad_datos" id="text_cantidad_datos" size="1" onchange="mostrarSeccionesDatos()">
            	<option value="1">1</option>
            	<option value="2">2</option>
            	<option value="3">3</option>
            	<option value="4">4</option>
            	<option value="5">5</option>
            	<option value="6">6</option>
            	<option value="7">7</option>
            	<option value="8">8</option>
            	<option value="9">9</option>
            	<option value="10">10</option>
            </select>
        </div>
           
        <div class="row">
	        <div class="col-md-6">
	            <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;" id="seccion_bloque_dato1">
		        Nro. Sílabas
		        <select name="text_count1" id="text_count1" size="1" onchange="mostrarSeccionesSilabas()">
	            	    <option value="1">1</option>
	            	    <option value="2">2</option>
	            	    <option value="3">3</option>
	            	    <option value="4">4</option>
	            	    <option value="5">5</option>
	            	    <option value="6">6</option>
	            	    <option value="7">7</option>
	            	    <option value="8">8</option>
	            	    <option value="9">9</option>
	            	    <option value="10">10</option>
	                </select>
		        <div style="width:100%;align-content:center;clear:both;">
			        <div style="float:left;" id="seccion_silaba_1_1">
			            <input type="text" name="text_silaba_1_1" id="text_silaba_1_1" class="form-control" style="width:80px;" value="{{text_silaba_1_1}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_1_2">
			            <input type="text" name="text_silaba_1_2" id="text_silaba_1_2" class="form-control" style="width:80px;" value="{{text_silaba_1_2}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_1_3">
			            <input type="text" name="text_silaba_1_3" id="text_silaba_1_3" class="form-control" style="width:80px;" value="{{text_silaba_1_3}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_1_4">
			            <input type="text" name="text_silaba_1_4" id="text_silaba_1_4" class="form-control" style="width:80px;" value="{{text_silaba_1_4}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_1_5">
			            <input type="text" name="text_silaba_1_5" id="text_silaba_1_5" class="form-control" style="width:80px;" value="{{text_silaba_1_5}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_1_6">
			            <input type="text" name="text_silaba_1_6" id="text_silaba_1_6" class="form-control" style="width:80px;" value="{{text_silaba_1_6}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_1_7">
			            <input type="text" name="text_silaba_1_7" id="text_silaba_1_7" class="form-control" style="width:80px;" value="{{text_silaba_1_7}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_1_8">
			            <input type="text" name="text_silaba_1_8" id="text_silaba_1_8" class="form-control" style="width:80px;" value="{{text_silaba_1_8}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_1_9">
			            <input type="text" name="text_silaba_1_9" id="text_silaba_1_9" class="form-control" style="width:80px;" value="{{text_silaba_1_9}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_1_10">
			            <input type="text" name="text_silaba_1_10" id="text_silaba_1_10" class="form-control" style="width:80px;" value="{{text_silaba_1_10}}">
			        </div>
		        </div>

{{img_palabra1_opciones_edicion}}
		        <div style="display:none;">
        		    <input type="text" name="img_palabra1" id="img_palabra1" class="form-control" value="{{img_palabra1}}">
        		</div>
        	    </div>
		</div>
		<div class="col-md-6">
		    <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;" id="seccion_bloque_dato2">
			Nro. Sílabas
			<select name="text_count2" id="text_count2" size="1" onchange="mostrarSeccionesSilabas()">
	            	    <option value="1">1</option>
	            	    <option value="2">2</option>
	            	    <option value="3">3</option>
	            	    <option value="4">4</option>
	            	    <option value="5">5</option>
	            	    <option value="6">6</option>
	            	    <option value="7">7</option>
	            	    <option value="8">8</option>
	            	    <option value="9">9</option>
	            	    <option value="10">10</option>
	                </select>
			<div style="width:100%;align-content:center;clear:both;">
				<div style="float:left;" id="seccion_silaba_2_1">
			            <input type="text" name="text_silaba_2_1" id="text_silaba_2_1" class="form-control" style="width:80px;" value="{{text_silaba_2_1}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_2_2">
			            <input type="text" name="text_silaba_2_2" id="text_silaba_2_2" class="form-control" style="width:80px;" value="{{text_silaba_2_2}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_2_3">
			            <input type="text" name="text_silaba_2_3" id="text_silaba_2_3" class="form-control" style="width:80px;" value="{{text_silaba_2_3}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_2_4">
			            <input type="text" name="text_silaba_2_4" id="text_silaba_2_4" class="form-control" style="width:80px;" value="{{text_silaba_2_4}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_2_5">
			            <input type="text" name="text_silaba_2_5" id="text_silaba_2_5" class="form-control" style="width:80px;" value="{{text_silaba_2_5}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_2_6">
			            <input type="text" name="text_silaba_2_6" id="text_silaba_2_6" class="form-control" style="width:80px;" value="{{text_silaba_2_6}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_2_7">
			            <input type="text" name="text_silaba_2_7" id="text_silaba_2_7" class="form-control" style="width:80px;" value="{{text_silaba_2_7}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_2_8">
			            <input type="text" name="text_silaba_2_8" id="text_silaba_2_8" class="form-control" style="width:80px;" value="{{text_silaba_2_8}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_2_9">
			            <input type="text" name="text_silaba_2_9" id="text_silaba_2_9" class="form-control" style="width:80px;" value="{{text_silaba_2_9}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_2_10">
			            <input type="text" name="text_silaba_2_10" id="text_silaba_2_10" class="form-control" style="width:80px;" value="{{text_silaba_2_10}}">
			        </div>
			</div>

{{img_palabra2_opciones_edicion}}
			<div style="display:none;">
		            <input type="text" name="img_palabra2" id="img_palabra2" class="form-control" value="{{img_palabra2}}">
		        </div>
		    </div>
		</div>
	</div>
	
	<div class="row">
	        <div class="col-md-6">
	            <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;" id="seccion_bloque_dato3">
		        Nro. Sílabas
		        <select name="text_count3" id="text_count3" size="1" onchange="mostrarSeccionesSilabas()">
	            	    <option value="1">1</option>
	            	    <option value="2">2</option>
	            	    <option value="3">3</option>
	            	    <option value="4">4</option>
	            	    <option value="5">5</option>
	            	    <option value="6">6</option>
	            	    <option value="7">7</option>
	            	    <option value="8">8</option>
	            	    <option value="9">9</option>
	            	    <option value="10">10</option>
	                </select>
		        <div style="width:100%;align-content:center;clear:both;">
			        <div style="float:left;" id="seccion_silaba_3_1">
			            <input type="text" name="text_silaba_3_1" id="text_silaba_3_1" class="form-control" style="width:80px;" value="{{text_silaba_3_1}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_3_2">
			            <input type="text" name="text_silaba_3_2" id="text_silaba_3_2" class="form-control" style="width:80px;" value="{{text_silaba_3_2}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_3_3">
			            <input type="text" name="text_silaba_3_3" id="text_silaba_3_3" class="form-control" style="width:80px;" value="{{text_silaba_3_3}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_3_4">
			            <input type="text" name="text_silaba_3_4" id="text_silaba_3_4" class="form-control" style="width:80px;" value="{{text_silaba_3_4}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_3_5">
			            <input type="text" name="text_silaba_3_5" id="text_silaba_3_5" class="form-control" style="width:80px;" value="{{text_silaba_3_5}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_3_6">
			            <input type="text" name="text_silaba_3_6" id="text_silaba_3_6" class="form-control" style="width:80px;" value="{{text_silaba_3_6}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_3_7">
			            <input type="text" name="text_silaba_3_7" id="text_silaba_3_7" class="form-control" style="width:80px;" value="{{text_silaba_3_7}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_3_8">
			            <input type="text" name="text_silaba_3_8" id="text_silaba_3_8" class="form-control" style="width:80px;" value="{{text_silaba_3_8}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_3_9">
			            <input type="text" name="text_silaba_3_9" id="text_silaba_3_9" class="form-control" style="width:80px;" value="{{text_silaba_3_9}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_3_10">
			            <input type="text" name="text_silaba_3_10" id="text_silaba_3_10" class="form-control" style="width:80px;" value="{{text_silaba_3_10}}">
			        </div>
			</div>

{{img_palabra3_opciones_edicion}}
			<div style="display:none;">
		            <input type="text" name="img_palabra3" id="img_palabra3" class="form-control" value="{{img_palabra3}}">
		        </div>
		    </div>
		</div>
		<div class="col-md-6">
		    <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;" id="seccion_bloque_dato4">
			Nro. Sílabas
			<select name="text_count4" id="text_count4" size="1" onchange="mostrarSeccionesSilabas()">
	            	    <option value="1">1</option>
	            	    <option value="2">2</option>
	            	    <option value="3">3</option>
	            	    <option value="4">4</option>
	            	    <option value="5">5</option>
	            	    <option value="6">6</option>
	            	    <option value="7">7</option>
	            	    <option value="8">8</option>
	            	    <option value="9">9</option>
	            	    <option value="10">10</option>
	                </select>
			<div style="width:100%;align-content:center;clear:both;">
				<div style="float:left;" id="seccion_silaba_4_1">
			            <input type="text" name="text_silaba_4_1" id="text_silaba_4_1" class="form-control" style="width:80px;" value="{{text_silaba_4_1}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_4_2">
			            <input type="text" name="text_silaba_4_2" id="text_silaba_4_2" class="form-control" style="width:80px;" value="{{text_silaba_4_2}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_4_3">
			            <input type="text" name="text_silaba_4_3" id="text_silaba_4_3" class="form-control" style="width:80px;" value="{{text_silaba_4_3}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_4_4">
			            <input type="text" name="text_silaba_4_4" id="text_silaba_4_4" class="form-control" style="width:80px;" value="{{text_silaba_4_4}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_4_5">
			            <input type="text" name="text_silaba_4_5" id="text_silaba_4_5" class="form-control" style="width:80px;" value="{{text_silaba_4_5}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_4_6">
			            <input type="text" name="text_silaba_4_6" id="text_silaba_4_6" class="form-control" style="width:80px;" value="{{text_silaba_4_6}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_4_7">
			            <input type="text" name="text_silaba_4_7" id="text_silaba_4_7" class="form-control" style="width:80px;" value="{{text_silaba_4_7}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_4_8">
			            <input type="text" name="text_silaba_4_8" id="text_silaba_4_8" class="form-control" style="width:80px;" value="{{text_silaba_4_8}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_4_9">
			            <input type="text" name="text_silaba_4_9" id="text_silaba_4_9" class="form-control" style="width:80px;" value="{{text_silaba_4_9}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_4_10">
			            <input type="text" name="text_silaba_4_10" id="text_silaba_4_10" class="form-control" style="width:80px;" value="{{text_silaba_4_10}}">
			        </div>
			</div>

{{img_palabra4_opciones_edicion}}
			<div style="display:none;">
		            <input type="text" name="img_palabra4" id="img_palabra4" class="form-control" value="{{img_palabra4}}">
		        </div>
		    </div>
		</div>
	</div>
        
	<div class="row">
	        <div class="col-md-6">
	            <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;" id="seccion_bloque_dato5">
		        Nro. Sílabas
		        <select name="text_count5" id="text_count5" size="1" onchange="mostrarSeccionesSilabas()">
	            	    <option value="1">1</option>
	            	    <option value="2">2</option>
	            	    <option value="3">3</option>
	            	    <option value="4">4</option>
	            	    <option value="5">5</option>
	            	    <option value="6">6</option>
	            	    <option value="7">7</option>
	            	    <option value="8">8</option>
	            	    <option value="9">9</option>
	            	    <option value="10">10</option>
	                </select>
		        <div style="width:100%;align-content:center;clear:both;">
			        <div style="float:left;" id="seccion_silaba_5_1">
			            <input type="text" name="text_silaba_5_1" id="text_silaba_5_1" class="form-control" style="width:80px;" value="{{text_silaba_5_1}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_5_2">
			            <input type="text" name="text_silaba_5_2" id="text_silaba_5_2" class="form-control" style="width:80px;" value="{{text_silaba_5_2}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_5_3">
			            <input type="text" name="text_silaba_5_3" id="text_silaba_5_3" class="form-control" style="width:80px;" value="{{text_silaba_5_3}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_5_4">
			            <input type="text" name="text_silaba_5_4" id="text_silaba_5_4" class="form-control" style="width:80px;" value="{{text_silaba_5_4}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_5_5">
			            <input type="text" name="text_silaba_5_5" id="text_silaba_5_5" class="form-control" style="width:80px;" value="{{text_silaba_5_5}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_5_6">
			            <input type="text" name="text_silaba_5_6" id="text_silaba_5_6" class="form-control" style="width:80px;" value="{{text_silaba_5_6}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_5_7">
			            <input type="text" name="text_silaba_5_7" id="text_silaba_5_7" class="form-control" style="width:80px;" value="{{text_silaba_5_7}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_5_8">
			            <input type="text" name="text_silaba_5_8" id="text_silaba_5_8" class="form-control" style="width:80px;" value="{{text_silaba_5_8}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_5_9">
			            <input type="text" name="text_silaba_5_9" id="text_silaba_5_9" class="form-control" style="width:80px;" value="{{text_silaba_5_9}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_5_10">
			            <input type="text" name="text_silaba_5_10" id="text_silaba_5_10" class="form-control" style="width:80px;" value="{{text_silaba_5_10}}">
			        </div>
			</div>

{{img_palabra5_opciones_edicion}}
			<div style="display:none;">
		            <input type="text" name="img_palabra5" id="img_palabra5" class="form-control" value="{{img_palabra5}}">
		        </div>
		    </div>
		</div>
		<div class="col-md-6">
		    <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;" id="seccion_bloque_dato6">
			Nro. Sílabas
			<select name="text_count6" id="text_count6" size="1" onchange="mostrarSeccionesSilabas()">
	            	    <option value="1">1</option>
	            	    <option value="2">2</option>
	            	    <option value="3">3</option>
	            	    <option value="4">4</option>
	            	    <option value="5">5</option>
	            	    <option value="6">6</option>
	            	    <option value="7">7</option>
	            	    <option value="8">8</option>
	            	    <option value="9">9</option>
	            	    <option value="10">10</option>
	                </select>
			<div style="width:100%;align-content:center;clear:both;">
				<div style="float:left;" id="seccion_silaba_6_1">
			            <input type="text" name="text_silaba_6_1" id="text_silaba_6_1" class="form-control" style="width:80px;" value="{{text_silaba_6_1}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_6_2">
			            <input type="text" name="text_silaba_6_2" id="text_silaba_6_2" class="form-control" style="width:80px;" value="{{text_silaba_6_2}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_6_3">
			            <input type="text" name="text_silaba_6_3" id="text_silaba_6_3" class="form-control" style="width:80px;" value="{{text_silaba_6_3}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_6_4">
			            <input type="text" name="text_silaba_6_4" id="text_silaba_6_4" class="form-control" style="width:80px;" value="{{text_silaba_6_4}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_6_5">
			            <input type="text" name="text_silaba_6_5" id="text_silaba_6_5" class="form-control" style="width:80px;" value="{{text_silaba_6_5}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_6_6">
			            <input type="text" name="text_silaba_6_6" id="text_silaba_6_6" class="form-control" style="width:80px;" value="{{text_silaba_6_6}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_6_7">
			            <input type="text" name="text_silaba_6_7" id="text_silaba_6_7" class="form-control" style="width:80px;" value="{{text_silaba_6_7}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_6_8">
			            <input type="text" name="text_silaba_6_8" id="text_silaba_6_8" class="form-control" style="width:80px;" value="{{text_silaba_6_8}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_6_9">
			            <input type="text" name="text_silaba_6_9" id="text_silaba_6_9" class="form-control" style="width:80px;" value="{{text_silaba_6_9}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_6_10">
			            <input type="text" name="text_silaba_6_10" id="text_silaba_6_10" class="form-control" style="width:80px;" value="{{text_silaba_6_10}}">
			        </div>
			</div>

{{img_palabra6_opciones_edicion}}
			<div style="display:none;">
		            <input type="text" name="img_palabra6" id="img_palabra6" class="form-control" value="{{img_palabra6}}">
		        </div>
		    </div>
		</div>
	</div>

<div class="row">
	        <div class="col-md-6">
	            <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;" id="seccion_bloque_dato7">
		        Nro. Sílabas
		        <select name="text_count7" id="text_count7" size="1" onchange="mostrarSeccionesSilabas()">
	            	    <option value="1">1</option>
	            	    <option value="2">2</option>
	            	    <option value="3">3</option>
	            	    <option value="4">4</option>
	            	    <option value="5">5</option>
	            	    <option value="6">6</option>
	            	    <option value="7">7</option>
	            	    <option value="8">8</option>
	            	    <option value="9">9</option>
	            	    <option value="10">10</option>
	                </select>
		        <div style="width:100%;align-content:center;clear:both;">
			        <div style="float:left;" id="seccion_silaba_7_1">
			            <input type="text" name="text_silaba_7_1" id="text_silaba_7_1" class="form-control" style="width:80px;" value="{{text_silaba_7_1}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_7_2">
			            <input type="text" name="text_silaba_7_2" id="text_silaba_7_2" class="form-control" style="width:80px;" value="{{text_silaba_7_2}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_7_3">
			            <input type="text" name="text_silaba_7_3" id="text_silaba_7_3" class="form-control" style="width:80px;" value="{{text_silaba_7_3}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_7_4">
			            <input type="text" name="text_silaba_7_4" id="text_silaba_7_4" class="form-control" style="width:80px;" value="{{text_silaba_7_4}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_7_5">
			            <input type="text" name="text_silaba_7_5" id="text_silaba_7_5" class="form-control" style="width:80px;" value="{{text_silaba_7_5}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_7_6">
			            <input type="text" name="text_silaba_7_6" id="text_silaba_7_6" class="form-control" style="width:80px;" value="{{text_silaba_7_6}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_7_7">
			            <input type="text" name="text_silaba_7_7" id="text_silaba_7_7" class="form-control" style="width:80px;" value="{{text_silaba_7_7}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_7_8">
			            <input type="text" name="text_silaba_7_8" id="text_silaba_7_8" class="form-control" style="width:80px;" value="{{text_silaba_7_8}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_7_9">
			            <input type="text" name="text_silaba_7_9" id="text_silaba_7_9" class="form-control" style="width:80px;" value="{{text_silaba_7_9}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_7_10">
			            <input type="text" name="text_silaba_7_10" id="text_silaba_7_10" class="form-control" style="width:80px;" value="{{text_silaba_7_10}}">
			        </div>
			</div>

{{img_palabra7_opciones_edicion}}
			<div style="display:none;">
		            <input type="text" name="img_palabra7" id="img_palabra7" class="form-control" value="{{img_palabra7}}">
		        </div>
		    </div>
		</div>
		<div class="col-md-6">
		    <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;" id="seccion_bloque_dato8">
			Nro. Sílabas
			<select name="text_count8" id="text_count8" size="1" onchange="mostrarSeccionesSilabas()">
	            	    <option value="1">1</option>
	            	    <option value="2">2</option>
	            	    <option value="3">3</option>
	            	    <option value="4">4</option>
	            	    <option value="5">5</option>
	            	    <option value="6">6</option>
	            	    <option value="7">7</option>
	            	    <option value="8">8</option>
	            	    <option value="9">9</option>
	            	    <option value="10">10</option>
	                </select>
			<div style="width:100%;align-content:center;clear:both;">
				<div style="float:left;" id="seccion_silaba_8_1">
			            <input type="text" name="text_silaba_8_1" id="text_silaba_8_1" class="form-control" style="width:80px;" value="{{text_silaba_8_1}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_8_2">
			            <input type="text" name="text_silaba_8_2" id="text_silaba_8_2" class="form-control" style="width:80px;" value="{{text_silaba_8_2}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_8_3">
			            <input type="text" name="text_silaba_8_3" id="text_silaba_8_3" class="form-control" style="width:80px;" value="{{text_silaba_8_3}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_8_4">
			            <input type="text" name="text_silaba_8_4" id="text_silaba_8_4" class="form-control" style="width:80px;" value="{{text_silaba_8_4}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_8_5">
			            <input type="text" name="text_silaba_8_5" id="text_silaba_8_5" class="form-control" style="width:80px;" value="{{text_silaba_8_5}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_8_6">
			            <input type="text" name="text_silaba_8_6" id="text_silaba_8_6" class="form-control" style="width:80px;" value="{{text_silaba_8_6}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_8_7">
			            <input type="text" name="text_silaba_8_7" id="text_silaba_8_7" class="form-control" style="width:80px;" value="{{text_silaba_8_7}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_8_8">
			            <input type="text" name="text_silaba_8_8" id="text_silaba_8_8" class="form-control" style="width:80px;" value="{{text_silaba_8_8}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_8_9">
			            <input type="text" name="text_silaba_8_9" id="text_silaba_8_9" class="form-control" style="width:80px;" value="{{text_silaba_8_9}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_8_10">
			            <input type="text" name="text_silaba_8_10" id="text_silaba_8_10" class="form-control" style="width:80px;" value="{{text_silaba_8_10}}">
			        </div>
			</div>

{{img_palabra8_opciones_edicion}}
			<div style="display:none;">
		            <input type="text" name="img_palabra8" id="img_palabra8" class="form-control" value="{{img_palabra8}}">
		        </div>
		    </div>
		</div>
	</div>

<div class="row">
	        <div class="col-md-6">
	            <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;" id="seccion_bloque_dato9">
		        Nro. Sílabas
		        <select name="text_count9" id="text_count9" size="1" onchange="mostrarSeccionesSilabas()">
	            	    <option value="1">1</option>
	            	    <option value="2">2</option>
	            	    <option value="3">3</option>
	            	    <option value="4">4</option>
	            	    <option value="5">5</option>
	            	    <option value="6">6</option>
	            	    <option value="7">7</option>
	            	    <option value="8">8</option>
	            	    <option value="9">9</option>
	            	    <option value="10">10</option>
	                </select>
		        <div style="width:100%;align-content:center;clear:both;">
			        <div style="float:left;" id="seccion_silaba_9_1">
			            <input type="text" name="text_silaba_9_1" id="text_silaba_9_1" class="form-control" style="width:80px;" value="{{text_silaba_9_1}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_9_2">
			            <input type="text" name="text_silaba_9_2" id="text_silaba_9_2" class="form-control" style="width:80px;" value="{{text_silaba_9_2}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_9_3">
			            <input type="text" name="text_silaba_9_3" id="text_silaba_9_3" class="form-control" style="width:80px;" value="{{text_silaba_9_3}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_9_4">
			            <input type="text" name="text_silaba_9_4" id="text_silaba_9_4" class="form-control" style="width:80px;" value="{{text_silaba_9_4}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_9_5">
			            <input type="text" name="text_silaba_9_5" id="text_silaba_9_5" class="form-control" style="width:80px;" value="{{text_silaba_9_5}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_9_6">
			            <input type="text" name="text_silaba_9_6" id="text_silaba_9_6" class="form-control" style="width:80px;" value="{{text_silaba_9_6}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_9_7">
			            <input type="text" name="text_silaba_9_7" id="text_silaba_9_7" class="form-control" style="width:80px;" value="{{text_silaba_9_7}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_9_8">
			            <input type="text" name="text_silaba_9_8" id="text_silaba_9_8" class="form-control" style="width:80px;" value="{{text_silaba_9_8}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_9_9">
			            <input type="text" name="text_silaba_9_9" id="text_silaba_9_9" class="form-control" style="width:80px;" value="{{text_silaba_9_9}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_9_10">
			            <input type="text" name="text_silaba_9_10" id="text_silaba_9_10" class="form-control" style="width:80px;" value="{{text_silaba_9_10}}">
			        </div>
			</div>

{{img_palabra9_opciones_edicion}}
			<div style="display:none;">
		            <input type="text" name="img_palabra9" id="img_palabra9" class="form-control" value="{{img_palabra9}}">
		        </div>
		    </div>
		</div>
		<div class="col-md-6">
		    <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;" id="seccion_bloque_dato10">
			Nro. Sílabas
			<select name="text_count10" id="text_count10" size="1" onchange="mostrarSeccionesSilabas()">
	            	    <option value="1">1</option>
	            	    <option value="2">2</option>
	            	    <option value="3">3</option>
	            	    <option value="4">4</option>
	            	    <option value="5">5</option>
	            	    <option value="6">6</option>
	            	    <option value="7">7</option>
	            	    <option value="8">8</option>
	            	    <option value="9">9</option>
	            	    <option value="10">10</option>
	                </select>
			<div style="width:100%;align-content:center;clear:both;">
				<div style="float:left;" id="seccion_silaba_10_1">
			            <input type="text" name="text_silaba_10_1" id="text_silaba_10_1" class="form-control" style="width:80px;" value="{{text_silaba_10_1}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_10_2">
			            <input type="text" name="text_silaba_10_2" id="text_silaba_10_2" class="form-control" style="width:80px;" value="{{text_silaba_10_2}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_10_3">
			            <input type="text" name="text_silaba_10_3" id="text_silaba_10_3" class="form-control" style="width:80px;" value="{{text_silaba_10_3}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_10_4">
			            <input type="text" name="text_silaba_10_4" id="text_silaba_10_4" class="form-control" style="width:80px;" value="{{text_silaba_10_4}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_10_5">
			            <input type="text" name="text_silaba_10_5" id="text_silaba_10_5" class="form-control" style="width:80px;" value="{{text_silaba_10_5}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_10_6">
			            <input type="text" name="text_silaba_10_6" id="text_silaba_10_6" class="form-control" style="width:80px;" value="{{text_silaba_10_6}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_10_7">
			            <input type="text" name="text_silaba_10_7" id="text_silaba_10_7" class="form-control" style="width:80px;" value="{{text_silaba_10_7}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_10_8">
			            <input type="text" name="text_silaba_10_8" id="text_silaba_10_8" class="form-control" style="width:80px;" value="{{text_silaba_10_8}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_10_9">
			            <input type="text" name="text_silaba_10_9" id="text_silaba_10_9" class="form-control" style="width:80px;" value="{{text_silaba_10_9}}">
			        </div>
			        <div style="float:left;" id="seccion_silaba_10_10">
			            <input type="text" name="text_silaba_10_10" id="text_silaba_10_10" class="form-control" style="width:80px;" value="{{text_silaba_10_10}}">
			        </div>
			</div>

{{img_palabra10_opciones_edicion}}
			<div style="display:none;">
		            <input type="text" name="img_palabra10" id="img_palabra10" class="form-control" value="{{img_palabra10}}">
		        </div>
		    </div>
		</div>
	</div>

<div class="row">
	        <div class="col-md-12">
	            <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;">
		        Mensajes al revisar el juego según los puntos obtenidos
			<div class="form-group">
		            <label for="text_feedback1">Si obtuvo el 100% del puntaje</label>
		            <input type="text" name="text_feedback1" id="text_feedback1" class="form-control" value="{{text_feedback1}}">
		        </div>
		        <div class="form-group">
		            <label for="text_feedback2">Si obtuvo más del 50% del puntaje</label>
		            <input type="text" name="text_feedback2" id="text_feedback2" class="form-control" value="{{text_feedback2}}">
		        </div>
		        <div class="form-group">
		            <label for="text_feedback3">Si obtuvo menos del 50% del puntaje</label>
		            <input type="text" name="text_feedback3" id="text_feedback3" class="form-control" value="{{text_feedback3}}">
		        </div>
		    </div>
        	</div>
        </div>
        
        <div class="row">
	    <div class="col-md-4">
	        <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;">
	            Color de fondo
	            <div style="width:100%;align-content:center;clear:both;">
		        <div style="float:left;">
		            <div style="display: none;">
		                <input type="text" name="color_fondo1" id="color_fondo1" class="form-control" value="{{color_fondo1}}">
		            </div>
		            <input type="text" name="color_fondo1_picker" id="color_fondo1_picker" class="form-control" style="width:60px;display:initial;" value="{{color_fondo1}}" />
		            <script>
		                initColorSpectrum("color_fondo1","color_fondo1_picker","{{color_fondo1}}");
		            </script>
		        </div>
		        <div style="float:left;">
		            <div style="display: none;">
		                <input type="text" name="color_fondo2" id="color_fondo2" class="form-control" value="{{color_fondo2}}">
		            </div>
		            <input type="text" name="color_fondo2_picker" id="color_fondo2_picker" class="form-control" style="width:60px;display:initial;" value="{{color_fondo2}}" />
		            <script>
		                initColorSpectrum("color_fondo2","color_fondo2_picker","{{color_fondo2}}");
		            </script>
		        </div>
	            </div>
	        </div>
            </div>
        </div>

Cod.HTML js

{"text_feedback1":"Excelente, lo hiciste muy bien.","text_feedback2":"Lo hiciste bien, vuelve a intentarlo.","text_feedback3":"Vamos tu puedes, intentalo de nuevo","text_silaba_1_1":"RE","text_silaba_1_2":"GA","text_silaba_1_3":"LO","text_silaba_2_1":"MO","text_silaba_2_2":"CHI","text_silaba_2_3":"LA","text_silaba_3_1":"LE","text_silaba_3_2":"CHU","text_silaba_3_3":"GA","text_silaba_4_1":"MAN","text_silaba_4_2":"ZA","text_silaba_4_3":"NA","text_silaba_5_1":"TE","text_silaba_5_2":"LE","text_silaba_5_3":"FO","text_silaba_5_4":"NO","text_silaba_6_1":"ZA","text_silaba_6_2":"NA","text_silaba_6_3":"HO","text_silaba_6_4":"RIA","textarea_titulojuego":"<h1>SÍLABAS</h1>","textarea_informaciones":"<h3>\ud83d\udcda Información del Juego</h3>\r\n<p><strong>Objetivo:</strong> Ordena las sílabas para formar las palabras correctas.</p>\r\n<p><strong>Puntuación:</strong></p>\r\n<ul>\r\n<li>Sílaba correcta: +1 punto</li>\r\n<li>Sílaba incorrecta: -1 punto</li>\r\n<li>Máximo: 20 puntos</li>\r\n</ul>\r\n<p><strong>Instrucciones:</strong> Arrastra las sílabas a las casillas amarillas en el orden correcto.</p>","textarea_instrucciones":"<h2>Ordena las sílabas para formar palabras</h2>","img_palabra1":"\ud83c\udf81","img_palabra2":"recursos/032023/img279_mochilaRecurso 4.png","img_palabra3":"recursos/032023/img282_lechuga.png","img_palabra4":"\ud83c\udf4e","img_palabra5":"\u260e\ufe0f","img_palabra6":"\ud83e\udd55","color_fondo1":"#3d85c6","color_fondo2":"#674ea7","text_silaba_1_4":"N","text_silaba_1_5":"C","text_silaba_1_6":"R","text_silaba_1_7":"B","text_silaba_1_8":"E","text_silaba_1_9":"V","text_silaba_1_10":"O","text_silaba_2_4":"J","text_silaba_2_5":"C","text_silaba_2_6":"M","text_silaba_2_7":"P","text_silaba_2_8":"Z","text_silaba_2_9":"N","text_silaba_2_10":"D","text_silaba_3_4":"H","text_silaba_3_5":"I","text_silaba_3_6":"R","text_silaba_3_7":"R","text_silaba_3_8":"D","text_silaba_3_9":"G","text_silaba_3_10":"T","text_silaba_4_4":"W","text_silaba_4_5":"H","text_silaba_4_6":"S","text_silaba_4_7":"F","text_silaba_4_8":"L","text_silaba_4_9":"C","text_silaba_4_10":"A","text_silaba_5_5":"H","text_silaba_5_6":"I","text_silaba_5_7":"H","text_silaba_5_8":"K","text_silaba_5_9":"T","text_silaba_5_10":"R","text_silaba_6_5":"L","text_silaba_6_6":"M","text_silaba_6_7":"H","text_silaba_6_8":"V","text_silaba_6_9":"D","text_silaba_6_10":"W","img_palabra7":"\u2764\ufe0f","text_silaba_7_1":"CO","text_silaba_7_2":"RA","text_silaba_7_3":"Z\u00d3N","text_silaba_7_4":"C","text_silaba_7_5":"K","text_silaba_7_6":"Q","text_silaba_7_7":"N","text_silaba_7_8":"R","text_silaba_7_9":"O","text_silaba_7_10":"J","img_palabra8":"\ud83c\udf53","text_silaba_8_1":"FRU","text_silaba_8_2":"TI","text_silaba_8_3":"LLA","text_silaba_8_4":"H","text_silaba_8_5":"Z","text_silaba_8_6":"W","text_silaba_8_7":"T","text_silaba_8_8":"X","text_silaba_8_9":"Q","text_silaba_8_10":"W","img_palabra9":"\ud83c\udf4c","text_silaba_9_1":"PL\u00c1","text_silaba_9_2":"TA","text_silaba_9_3":"NO","text_silaba_9_4":"X","text_silaba_9_5":"E","text_silaba_9_6":"T","text_silaba_9_7":"T","text_silaba_9_8":"R","text_silaba_9_9":"M","text_silaba_9_10":"H","img_palabra10":"\ud83c\udf45","text_silaba_10_1":"TO","text_silaba_10_2":"MA","text_silaba_10_3":"TE","text_silaba_10_4":"F","text_silaba_10_5":"A","text_silaba_10_6":"Q","text_silaba_10_7":"V","text_silaba_10_8":"I","text_silaba_10_9":"W","text_silaba_10_10":"A","text_cantidad_datos":"6","text_count1":"3","text_count2":"3","text_count3":"3","text_count4":"3","text_count5":"4","text_count6":"4","text_count7":"3","text_count8":"3","text_count9":"3","text_count10":"3"}