Volver

Crear juego

SUCESIONES NUMÉRICAS

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;
        }

.number-item {
            background: white;
            border: 3px solid #6c349d;
            border-radius: 8px;
            padding: 10px;
            font-size: 24px;
            font-weight: bold;
            color: #2d1b4e;
            cursor: grab;
            user-select: none;
            touch-action: none;
            transition: all 0.2s;
            min-width: 60px;
            text-align: center;
        }

.number-item.dragging {
            opacity: 0.5;
            border-color: #22c55e;
            box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
        }

.number-item.fixed {
            cursor: default;
            background: #e5e7eb;
            align-content: center;
        }

.drop-zone {
            min-width: 70px;
            min-height: 70px;
            border: 3px dashed #cbd5e1;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8fafc;
            transition: all 0.2s;
            position: relative;
        }

.drop-zone.drag-over {
            background: #dbeafe;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }

.drop-zone.filled {
            border-style: solid;
            border-color: #6c349d;
            background: white;
        }

.drop-zone .status-icon {
            position: absolute;
            top: -10px;
            right: -10px;
            font-size: 24px;
            display: none;
        }

.drop-zone.correct .status-icon {
            display: block;
        }

.drop-zone.incorrect .status-icon {
            display: block;
        }

.series-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 100%;
        }

.series-wrapper {
            background: rgba(255, 255, 255, 0.1);
            border: 3px solid #8b7bb8;
            border-radius: 12px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

.series-wrapper.serie-0 {
            border-color: #f59e0b;
            background: rgba(245, 158, 11, 0.1);
        }

.series-wrapper.serie-1 {
            border-color: #3b82f6;
            background: rgba(59, 130, 246, 0.1);
        }

.series-wrapper.serie-2 {
            border-color: #10b981; /* Verde esmeralda */
            background: rgba(16, 185, 129, 0.1);
        }

.series-wrapper.serie-3 {
            border-color: #6366f1; /* Índigo */
            background: rgba(99, 102, 241, 0.1);
        }

.series-wrapper.serie-4 {
            border-color: #a855f7; /* Violeta */
            background: rgba(168, 85, 247, 0.1);
        }

.series-wrapper.serie-5 {
            border-color: #ec4899; /* Rosa */
            background: rgba(236, 72, 153, 0.1);
        }

.series-wrapper.serie-6 {
            border-color: #06b6d4; /* Cian */
            background: rgba(6, 182, 212, 0.1);
        }

.series-wrapper.serie-7 {
            border-color: #7c3aed;
            background: rgba(124, 58, 237, 0.1);
        }

.series-wrapper.serie-8 {
            border-color: #ca8a04;
            background: rgba(202, 138, 4, 0.1);
        }

.series-wrapper.serie-9 {
            border-color: #ef8644;
            background: rgba(239, 134, 68, 0.1);
        }

.series-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: center;
        }

.numbers-pool {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
            gap: 10px;
            padding: 15px;
            background: #f1f5f9;
            border-radius: 8px;
        }

.block-title {
            font-size: 18px;
            font-weight: bold;
            color: #2d1b4e;
            text-align: center;
            display:flex;
            align-items: center;
        }

.clone-dragging {
            /*position: fixed;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.8;
            border-color: #22c55e !important;
            box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.5) !important;*/
            position: fixed;
            width: auto;
            height: 70px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            font-weight: bold;
            pointer-events: none;
            z-index: 9999;
            border: 3px solid #7ed321;
            box-shadow: 0 0 15px rgba(126, 211, 33, 0.6);
            padding-left:10px;
            padding-right:10px;
        }

.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;
        }

.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-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;
            }

.info-panel {
                width: 100%;
                right: -100%;
            }

.number-item {
                font-size: 20px;
                padding: 8px;
                min-width: 50px;
            }
        }
    </style>

.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> Sucesiones Numéricas <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 = {
            series: [
                {
                    count: {{text_count1}},
                    name: '{{text_serie1}}',
                    sequence: ['{{text_seq1_1}}', '{{text_seq1_2}}', '{{text_seq1_3}}', '{{text_seq1_4}}', '{{text_seq1_5}}', '{{text_seq1_6}}', '{{text_seq1_7}}', '{{text_seq1_8}}', '{{text_seq1_9}}', '{{text_seq1_10}}'],
                    fixed_element: [{{text_fix1_1}}, {{text_fix1_2}}, {{text_fix1_3}}, {{text_fix1_4}}, {{text_fix1_5}}, {{text_fix1_6}}, {{text_fix1_7}}, {{text_fix1_8}}, {{text_fix1_9}}, {{text_fix1_10}}]
                },
                {
                    count: {{text_count2}},
                    name: '{{text_serie2}}',
                    sequence: ['{{text_seq2_1}}', '{{text_seq2_2}}', '{{text_seq2_3}}', '{{text_seq2_4}}', '{{text_seq2_5}}', '{{text_seq2_6}}', '{{text_seq2_7}}', '{{text_seq2_8}}', '{{text_seq2_9}}', '{{text_seq2_10}}'],
                    fixed_element: [{{text_fix2_1}}, {{text_fix2_2}}, {{text_fix2_3}}, {{text_fix2_4}}, {{text_fix2_5}}, {{text_fix2_6}}, {{text_fix2_7}}, {{text_fix2_8}}, {{text_fix2_9}}, {{text_fix2_10}}]
                },
                {
                    count: {{text_count3}},
                    name: '{{text_serie3}}',
                    sequence: ['{{text_seq3_1}}', '{{text_seq3_2}}', '{{text_seq3_3}}', '{{text_seq3_4}}', '{{text_seq3_5}}', '{{text_seq3_6}}', '{{text_seq3_7}}', '{{text_seq3_8}}', '{{text_seq3_9}}', '{{text_seq3_10}}'],
                    fixed_element: [{{text_fix3_1}}, {{text_fix3_2}}, {{text_fix3_3}}, {{text_fix3_4}}, {{text_fix3_5}}, {{text_fix3_6}}, {{text_fix3_7}}, {{text_fix3_8}}, {{text_fix3_9}}, {{text_fix3_10}}]
                },
                {
                    count: {{text_count4}},
                    name: '{{text_serie4}}',
                    sequence: ['{{text_seq4_1}}', '{{text_seq4_2}}', '{{text_seq4_3}}', '{{text_seq4_4}}', '{{text_seq4_5}}', '{{text_seq4_6}}', '{{text_seq4_7}}', '{{text_seq4_8}}', '{{text_seq4_9}}', '{{text_seq4_10}}'],
                    fixed_element: [{{text_fix4_1}}, {{text_fix4_2}}, {{text_fix4_3}}, {{text_fix4_4}}, {{text_fix4_5}}, {{text_fix4_6}}, {{text_fix4_7}}, {{text_fix4_8}}, {{text_fix4_9}}, {{text_fix4_10}}]
                },
                {
                    count: {{text_count5}},
                    name: '{{text_serie5}}',
                    sequence: ['{{text_seq5_1}}', '{{text_seq5_2}}', '{{text_seq5_3}}', '{{text_seq5_4}}', '{{text_seq5_5}}', '{{text_seq5_6}}', '{{text_seq5_7}}', '{{text_seq5_8}}', '{{text_seq5_9}}', '{{text_seq5_10}}'],
                    fixed_element: [{{text_fix5_1}}, {{text_fix5_2}}, {{text_fix5_3}}, {{text_fix5_4}}, {{text_fix5_5}}, {{text_fix5_6}}, {{text_fix5_7}}, {{text_fix5_8}}, {{text_fix5_9}}, {{text_fix5_10}}]
                },
                {
                    count: {{text_count6}},
                    name: '{{text_serie6}}',
                    sequence: ['{{text_seq6_1}}', '{{text_seq6_2}}', '{{text_seq6_3}}', '{{text_seq6_4}}', '{{text_seq6_5}}', '{{text_seq6_6}}', '{{text_seq6_7}}', '{{text_seq6_8}}', '{{text_seq6_9}}', '{{text_seq6_10}}'],
                    fixed_element: [{{text_fix6_1}}, {{text_fix6_2}}, {{text_fix6_3}}, {{text_fix6_4}}, {{text_fix6_5}}, {{text_fix6_6}}, {{text_fix6_7}}, {{text_fix6_8}}, {{text_fix6_9}}, {{text_fix6_10}}]
                },
                {
                    count: {{text_count7}},
                    name: '{{text_serie7}}',
                    sequence: ['{{text_seq7_1}}', '{{text_seq7_2}}', '{{text_seq7_3}}', '{{text_seq7_4}}', '{{text_seq7_5}}', '{{text_seq7_6}}', '{{text_seq7_7}}', '{{text_seq7_8}}', '{{text_seq7_9}}', '{{text_seq7_10}}'],
                    fixed_element: [{{text_fix7_1}}, {{text_fix7_2}}, {{text_fix7_3}}, {{text_fix7_4}}, {{text_fix7_5}}, {{text_fix7_6}}, {{text_fix7_7}}, {{text_fix7_8}}, {{text_fix7_9}}, {{text_fix7_10}}]
                },
                {
                    count: {{text_count8}},
                    name: '{{text_serie8}}',
                    sequence: ['{{text_seq8_1}}', '{{text_seq8_2}}', '{{text_seq8_3}}', '{{text_seq8_4}}', '{{text_seq8_5}}', '{{text_seq8_6}}', '{{text_seq8_7}}', '{{text_seq8_8}}', '{{text_seq8_9}}', '{{text_seq8_10}}'],
                    fixed_element: [{{text_fix8_1}}, {{text_fix8_2}}, {{text_fix8_3}}, {{text_fix8_4}}, {{text_fix8_5}}, {{text_fix8_6}}, {{text_fix8_7}}, {{text_fix8_8}}, {{text_fix8_9}}, {{text_fix8_10}}]
                },
                {
                    count: {{text_count9}},
                    name: '{{text_serie9}}',
                    sequence: ['{{text_seq9_1}}', '{{text_seq9_2}}', '{{text_seq9_3}}', '{{text_seq9_4}}', '{{text_seq9_5}}', '{{text_seq9_6}}', '{{text_seq9_7}}', '{{text_seq9_8}}', '{{text_seq9_9}}', '{{text_seq9_10}}'],
                    fixed_element: [{{text_fix9_1}}, {{text_fix9_2}}, {{text_fix9_3}}, {{text_fix9_4}}, {{text_fix9_5}}, {{text_fix9_6}}, {{text_fix9_7}}, {{text_fix9_8}}, {{text_fix9_9}}, {{text_fix9_10}}]
                },
                {
                    count: {{text_count10}},
                    name: '{{text_serie10}}',
                    sequence: ['{{text_seq10_1}}', '{{text_seq10_2}}', '{{text_seq10_3}}', '{{text_seq10_4}}', '{{text_seq10_5}}', '{{text_seq10_6}}', '{{text_seq10_7}}', '{{text_seq10_8}}', '{{text_seq10_9}}', '{{text_seq10_10}}'],
                    fixed_element: [{{text_fix10_1}}, {{text_fix10_2}}, {{text_fix10_3}}, {{text_fix10_4}}, {{text_fix10_5}}, {{text_fix10_6}}, {{text_fix10_7}}, {{text_fix10_8}}, {{text_fix10_9}}, {{text_fix10_10}}]
                }
            ]
        };

let gameState = {
            started: false,
            paused: false,
            checked: false,
            timerInterval: null,
            seconds: 0,
            score: 0,
            userAnswers: {},
            draggedElement: null,
            clonedElement: null,
            //touchOffset: { x: 0, y: 0 },
            hasMoved: false,
            touchStartTime: 0,
            touchStartPos: { x: 0, y: 0 }
        };

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

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

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 displayBlockCategoryId(xid_category_block){
            let cont=0;
            gameData.series.forEach((serie, serieIdx) => {
                if(cont<gameNumberData){
                    document.getElementById('id_category_block_'+serieIdx).style.display='none';
                    document.getElementById('id_button_block_'+serieIdx).style.background='#e6e2ea';
                }
                cont++;
            });
            document.getElementById('id_category_block_'+xid_category_block).style.display='flex';

document.getElementById('id_button_block_'+xid_category_block).style.background='#ffffff';
            document.getElementById('id_btn_block_todo').style.background='#e6e2ea';
        }

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

// Obtener todos los números que no están fijos
            const allNumbers = [];
            let cont=0;
            gameData.series.forEach(serie => {
                if(cont<gameNumberData){
                    let cont2=0;
                    serie.sequence.forEach((num, idx) => {
                        if(cont2<serie.count){
                            if (serie.fixed_element[idx]==0) {
                                allNumbers.push(num);
                            }
                        }
                        cont2++;
                    });
                }
                cont++;
            });

// Mezclar números aleatoriamente
            const shuffledNumbers = allNumbers.sort(() => Math.random() - 0.5);

// Bloque 1: Pool de números
            const poolBlock = document.createElement('div');
            //poolBlock.style.display="block";
            poolBlock.className = 'block';
            
            let icono1='{{img_bloque1_icono1}}';
            let titulo1='{{text_bloque1_titulo1}}';
            if(icono1.includes('.'))icono1 = "<img style='width:60px;height:auto;' src='"+icono1+"'>";
            poolBlock.innerHTML = `
                <div class="block-title"><div style="font-size:48px;">${icono1}</div><div style="width:99%;">${titulo1}</div></div>
                <div style="width:100%;"><div class="numbers-pool" id="numbersPool"></div></div>
            `;
            container.appendChild(poolBlock);
            const poolContainer = poolBlock.querySelector('#numbersPool');
            shuffledNumbers.forEach((num, idx) => {
                const numEl = createNumberElement(num, `pool-${idx}`);
                poolContainer.appendChild(numEl);
            });
            // Menu series
            let itemsMenu='';
            cont=0;
            gameData.series.forEach((serie, serieIdx) => {
                if(cont<gameNumberData){
                    itemsMenu=itemsMenu+`<button id="id_button_block_${serieIdx}" onclick="displayBlockCategoryId('${serieIdx}')" style="border:solid 2px #444444;margin-bottom:10px;background:#e6e2ea;">${(serie.name)}</button>`;
                }
                cont++;
            });
            itemsMenu=itemsMenu+`<button id="id_btn_block_todo" onclick="displayAllBlocksCategories()" style="border:solid 2px #444444;margin-bottom:10px;background:#ffffff;">Todas</button>`;
            itemsMenu='<div style="display:block;">'+itemsMenu+'</div>';
            // Bloque 2: Series
            const seriesBlock = document.createElement('div');
            seriesBlock.className = 'block';
            
            let icono2='{{img_bloque2_icono2}}';
            let titulo2='{{text_bloque2_titulo2}}';
            if(icono2.includes('.'))icono2 = "<img style='width:60px;height:auto;' src='"+icono2+"'>";
            seriesBlock.innerHTML = `
                <div class="block-title"><div style="font-size:48px;">${icono2}</div><div style="width:99%;">${titulo2}</div></div>`+itemsMenu+`
                <div class="series-container" id="seriesContainer"></div>
            `;
            container.appendChild(seriesBlock);

const seriesContainer = seriesBlock.querySelector('#seriesContainer');
            cont=0;
            gameData.series.forEach((serie, serieIdx) => {
                if(cont<gameNumberData){
                    // Crear wrapper para cada serie
                    const serieWrapper = document.createElement('div');
                    serieWrapper.className = `series-wrapper serie-${serieIdx}`;
                    
                    serieWrapper.id='id_category_block_'+serieIdx;

const row = document.createElement('div');
                    row.className = 'series-row';
                    /*const row1 = document.createElement('div');
                    row1.className = 'series-row';
                    const row2 = document.createElement('div');
                    row2.className = 'series-row';*/

serieWrapper.appendChild(row);
                    //serieWrapper.appendChild(row1);
                    //serieWrapper.appendChild(row2);
                    seriesContainer.appendChild(serieWrapper);
                }
                cont++;
            });
        }

function createNumberElement(number, id, fixed = false) {
            const el = document.createElement('div');
            el.className = 'number-item' + (fixed ? ' fixed' : '');
            el.textContent = number;
            el.dataset.number = number;
            el.dataset.id = id;
            el.dataset.originalPosition = 'pool';

if (!fixed) {
                el.draggable = true;
                el.addEventListener('dragstart', handleDragStart);
                el.addEventListener('dragend', handleDragEnd);
                el.addEventListener('click', handleNumberClick);

// Touch events
                el.addEventListener('touchstart', handleTouchStart, { passive: false });
                el.addEventListener('touchmove', handleTouchMove, { passive: false });
                el.addEventListener('touchend', handleTouchEnd, { passive: false });
            }

return el;
        }

function createDropZone(serieIdx, position, correctNumber) {
            const zone = document.createElement('div');
            zone.className = 'drop-zone';
            zone.dataset.serie = serieIdx;
            zone.dataset.position = position;
            zone.dataset.correct = correctNumber;

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

const icon = document.createElement('span');
            icon.className = 'status-icon';
            zone.appendChild(icon);

return zone;
        }

// Drag and Drop - Desktop
        function handleDragStart(e) {
            if (gameState.checked) return;
            gameState.draggedElement = e.target;
            e.target.classList.add('dragging');
            e.dataTransfer.effectAllowed = 'move';
        }

function handleDragEnd(e) {
            e.target.classList.remove('dragging');
            gameState.draggedElement = null;
        }

function handleDragOver(e) {
            if (gameState.checked) return;
            e.preventDefault();
            e.dataTransfer.dropEffect = 'move';
            e.currentTarget.classList.add('drag-over');
        }

function handleDragLeave(e) {
            e.currentTarget.classList.remove('drag-over');
        }

function handleDrop(e) {
            e.preventDefault();
            e.currentTarget.classList.remove('drag-over');
            
            if (gameState.checked || !gameState.draggedElement) return;

const dropZone = e.currentTarget;
            
            // Si ya hay un número, devolverlo al pool
            const existingNumber = dropZone.querySelector('.number-item');
            if (existingNumber) {
                returnToPool(existingNumber);
            }

// Colocar el nuevo número
            placeNumberInZone(gameState.draggedElement, dropZone);
        }

// Touch Events - Mobile
        function handleTouchStart(e) {
            if (gameState.checked) return;
            e.preventDefault();
            
            const touch = e.touches[0];
            const el = e.target;
            const rect = el.getBoundingClientRect();
            
            gameState.draggedElement = el;
            gameState.touchStartTime = Date.now();
            gameState.touchStartPos = { x: touch.clientX, y: touch.clientY };
            gameState.hasMoved = false;
            /*gameState.touchOffset = {
                x: touch.clientX - rect.left,
                y: touch.clientY - rect.top
            };*/

el.classList.add('dragging');

// Crear clon visual
            /*gameState.clonedElement = el.cloneNode(true);
            gameState.clonedElement.classList.add('clone-dragging');
            gameState.clonedElement.style.position = 'fixed';
            gameState.clonedElement.style.left = (touch.clientX - gameState.touchOffset.x) + 'px';
            gameState.clonedElement.style.top = (touch.clientY - gameState.touchOffset.y) + 'px';
            gameState.clonedElement.style.width = rect.width + 'px';
            gameState.clonedElement.style.height = rect.height + 'px';
            document.body.appendChild(gameState.clonedElement);*/

// Crear elemento clonado
            gameState.clonedElement = document.createElement('div');
            gameState.clonedElement.className = 'clone-dragging';
            gameState.clonedElement.textContent = e.target.textContent;
            gameState.clonedElement.style.left = touch.clientX - 35 + 'px';
            gameState.clonedElement.style.top = touch.clientY - 35 + 'px';
            document.body.appendChild(gameState.clonedElement);
        }

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

// Detectar zona sobre la que está
            const elementUnderTouch = document.elementFromPoint(touch.clientX, touch.clientY);
            document.querySelectorAll('.drop-zone').forEach(zone => {
                zone.classList.remove('drag-over');
            });

if (elementUnderTouch) {
                const dropZone = elementUnderTouch.closest('.drop-zone');
                if (dropZone) {
                    dropZone.classList.add('drag-over');
                }
            }
        }

function handleTouchEnd(e) {
            if (!gameState.draggedElement || gameState.checked) return;
            e.preventDefault();

const touch = e.changedTouches[0];
            const elementUnderTouch = document.elementFromPoint(touch.clientX, touch.clientY);
            
            gameState.draggedElement.classList.remove('dragging');

if (gameState.clonedElement) {
                gameState.clonedElement.remove();
                gameState.clonedElement = null;
            }

document.querySelectorAll('.drop-zone').forEach(zone => {
                zone.classList.remove('drag-over');
            });

// Si no se movió (fue un tap), devolver al pool
            if (!gameState.hasMoved && gameState.draggedElement.dataset.originalPosition !== 'pool') {
                returnToPool(gameState.draggedElement);
            } else if (gameState.hasMoved && elementUnderTouch) {
                // Si se arrastró, intentar colocar en zona
                const dropZone = elementUnderTouch.closest('.drop-zone');
                if (dropZone) {
                    const existingNumber = dropZone.querySelector('.number-item');
                    if (existingNumber) {
                        returnToPool(existingNumber);
                    }
                    placeNumberInZone(gameState.draggedElement, dropZone);
                }
            }

gameState.draggedElement = null;
            gameState.hasMoved = false;
        }

function handleNumberClick(e) {
            if (gameState.checked) return;
            
            const el = e.target;
            if (el.dataset.originalPosition !== 'pool') {
                returnToPool(el);
            }
        }

function returnToPool(numberEl) {
            const pool = document.getElementById('numbersPool');
            numberEl.dataset.originalPosition = 'pool';
            delete numberEl.dataset.placedSerie;
            delete numberEl.dataset.placedPosition;
            
            // Remover de la zona actual
            const currentZone = numberEl.closest('.drop-zone');
            if (currentZone) {
                currentZone.classList.remove('filled', 'correct', 'incorrect');
                const icon = currentZone.querySelector('.status-icon');
                if (icon) icon.textContent = '';
            }
            
            pool.appendChild(numberEl);
        }

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 totalAnswers = 0;

// Revisar cada zona de caída
            document.querySelectorAll('.drop-zone').forEach(zone => {
                const numberEl = zone.querySelector('.number-item');
                const correctNumber = parseInt(zone.dataset.correct);
                
                if (numberEl) {
                    totalAnswers++;
                    const placedNumber = parseInt(numberEl.dataset.number);
                    const icon = zone.querySelector('.status-icon');
                    
                    if (placedNumber === correctNumber) {
                        score += 1;
                        zone.classList.add('correct');
                        icon.textContent = '✅';
                    } else {
                        score -= 1;
                        zone.classList.add('incorrect');
                        icon.textContent = '❌';
                    }
                }
            });

gameState.score = score;

const timeStr = formatTime(gameState.seconds);

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

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

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);
        }

function toggleInfo() {
            const panel = document.getElementById('infoPanel');
            panel.classList.toggle('open');
        }

function toggleFullscreen() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();
            } else {
                document.exitFullscreen();
            }
        }
    </script>

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" style="margin-top:5px;">
            <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" style="margin-top:5px;">
            <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;">
        {{img_bloque1_icono1_opciones_edicion}}
        <div style="display:none;">
            <input type="text" name="img_bloque1_icono1" id="img_bloque1_icono1" class="form-control" value="{{img_bloque1_icono1}}">
        </div>
        <div class="form-group">
            <label for="text_bloque1_titulo1">Título 1er bloque</label>
            <input type="text" name="text_bloque1_titulo1" id="text_bloque1_titulo1" class="form-control" value="{{text_bloque1_titulo1}}">
        </div>
        
        {{img_bloque2_icono2_opciones_edicion}}
        <div style="display:none;">
            <input type="text" name="img_bloque2_icono2" id="img_bloque2_icono2" class="form-control" value="{{img_bloque2_icono2}}">
        </div>
        <div class="form-group">
            <label for="text_bloque2_titulo2">Título 2do bloque</label>
            <input type="text" name="text_bloque2_titulo2" id="text_bloque2_titulo2" class="form-control" value="{{text_bloque2_titulo2}}">
        </div>
    </div>

<div class="form-group" style="margin-top:5px;">
    	    <label for="text_cantidad_datos">Cantidad series 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 style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;background:#fff1db;" id="seccion_bloque_serie1">
        <div class="form-group">
            <label for="text_serie1">Serie 1: </label>
            <input type="text" name="text_serie1" id="text_serie1" class="form-control" value="{{text_serie1}}">
            Nro. Elementos:
            <select name="text_count1" id="text_count1" size="1" onchange="mostrarSeccionesSeries()">
	            <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" id="seccion_serie1_seq1">
	        <div class="form-group">
            	    <label for="text_seq1_1">1</label>
                    <input type="text" name="text_seq1_1" id="text_seq1_1" class="form-control" value="{{text_seq1_1}}">
		    <select name="text_fix1_1" id="text_fix1_1" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
	</select>
                </div>
                
	    </div>
	    <div class="col-md-6" id="seccion_serie1_seq2">
	        <div class="form-group">
	            <label for="text_seq1_2">2</label>
	            <input type="text" name="text_seq1_2" id="text_seq1_2" class="form-control" value="{{text_seq1_2}}">
	            <select name="text_fix1_2" id="text_fix1_2" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie1_seq3">
	        <div class="form-group">
	            <label for="text_seq1_3">3</label>
	            <input type="text" name="text_seq1_3" id="text_seq1_3" class="form-control" value="{{text_seq1_3}}">
	            <select name="text_fix1_3" id="text_fix1_3" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie1_seq4">
	        <div class="form-group">
	            <label for="text_seq1_4">4</label>
	            <input type="text" name="text_seq1_4" id="text_seq1_4" class="form-control" value="{{text_seq1_4}}">
	            <select name="text_fix1_4" id="text_fix1_4" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie1_seq5">
	        <div class="form-group">
	            <label for="text_seq1_5">5</label>
	            <input type="text" name="text_seq1_5" id="text_seq1_5" class="form-control" value="{{text_seq1_5}}">
	            <select name="text_fix1_5" id="text_fix1_5" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie1_seq6">
	        <div class="form-group">
	            <label for="text_seq1_6">6</label>
	            <input type="text" name="text_seq1_6" id="text_seq1_6" class="form-control" value="{{text_seq1_6}}">
	            <select name="text_fix1_6" id="text_fix1_6" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie1_seq7">
	        <div class="form-group">
	            <label for="text_seq1_7">7</label>
	            <input type="text" name="text_seq1_7" id="text_seq1_7" class="form-control" value="{{text_seq1_7}}">
	            <select name="text_fix1_7" id="text_fix1_7" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie1_seq8">
	        <div class="form-group">
	            <label for="text_seq1_8">8</label>
	            <input type="text" name="text_seq1_8" id="text_seq1_8" class="form-control" value="{{text_seq1_8}}">
	            <select name="text_fix1_8" id="text_fix1_8" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie1_seq9">
	        <div class="form-group">
	            <label for="text_seq1_9">9</label>
	            <input type="text" name="text_seq1_9" id="text_seq1_9" class="form-control" value="{{text_seq1_9}}">
	            <select name="text_fix1_9" id="text_fix1_9" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie1_seq10">
	        <div class="form-group">
	            <label for="text_seq1_10">10</label>
	            <input type="text" name="text_seq1_10" id="text_seq1_10" class="form-control" value="{{text_seq1_10}}">
	            <select name="text_fix1_10" id="text_fix1_10" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>
    </div>

<div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;background:#cce9df;" id="seccion_bloque_serie2">
        <div class="form-group">
            <label for="text_serie2">Serie 2: </label>
            <input type="text" name="text_serie2" id="text_serie2" class="form-control" value="{{text_serie2}}">
            Nro. Elementos:
            <select name="text_count2" id="text_count2" size="1" onchange="mostrarSeccionesSeries()">
	            <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" id="seccion_serie2_seq1">
	        <div class="form-group">
	            <label for="text_seq2_1">1</label>
	            <input type="text" name="text_seq2_1" id="text_seq2_1" class="form-control" value="{{text_seq2_1}}">
	            <select name="text_fix2_1" id="text_fix2_1" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie2_seq2">
	        <div class="form-group">
	            <label for="text_seq2_2">2</label>
	            <input type="text" name="text_seq2_2" id="text_seq2_2" class="form-control" value="{{text_seq2_2}}">
	            <select name="text_fix2_2" id="text_fix2_2" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie2_seq3">
	        <div class="form-group">
	            <label for="text_seq2_3">3</label>
	            <input type="text" name="text_seq2_3" id="text_seq2_3" class="form-control" value="{{text_seq2_3}}">
	            <select name="text_fix2_3" id="text_fix2_3" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie2_seq4">
	        <div class="form-group">
	            <label for="text_seq2_4">4</label>
	            <input type="text" name="text_seq2_4" id="text_seq2_4" class="form-control" value="{{text_seq2_4}}">
	            <select name="text_fix2_4" id="text_fix2_4" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie2_seq5">
	        <div class="form-group">
	            <label for="text_seq2_5">5</label>
	            <input type="text" name="text_seq2_5" id="text_seq2_5" class="form-control" value="{{text_seq2_5}}">
	            <select name="text_fix2_5" id="text_fix2_5" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie2_seq6">
	        <div class="form-group">
	            <label for="text_seq2_6">6</label>
	            <input type="text" name="text_seq2_6" id="text_seq2_6" class="form-control" value="{{text_seq2_6}}">
	            <select name="text_fix2_6" id="text_fix2_6" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie2_seq7">
	        <div class="form-group">
	            <label for="text_seq2_7">7</label>
	            <input type="text" name="text_seq2_7" id="text_seq2_7" class="form-control" value="{{text_seq2_7}}">
	            <select name="text_fix2_7" id="text_fix2_7" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie2_seq8">
	        <div class="form-group">
	            <label for="text_seq2_8">8</label>
	            <input type="text" name="text_seq2_8" id="text_seq2_8" class="form-control" value="{{text_seq2_8}}">
	            <select name="text_fix2_8" id="text_fix2_8" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie2_seq9">
	        <div class="form-group">
	            <label for="text_seq2_9">9</label>
	            <input type="text" name="text_seq2_9" id="text_seq2_9" class="form-control" value="{{text_seq2_9}}">
	            <select name="text_fix2_9" id="text_fix2_9" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie2_seq10">
	        <div class="form-group">
	            <label for="text_seq2_10">10</label>
	            <input type="text" name="text_seq2_10" id="text_seq2_10" class="form-control" value="{{text_seq2_10}}">
	            <select name="text_fix2_10" id="text_fix2_10" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>
    </div>

<div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;background:#f4d9c5;" id="seccion_bloque_serie3">
        <div class="form-group">
            <label for="text_serie3">Serie 3: </label>
            <input type="text" name="text_serie3" id="text_serie3" class="form-control" value="{{text_serie3}}">
            Nro. Elementos:
            <select name="text_count3" id="text_count3" size="1" onchange="mostrarSeccionesSeries()">
	            <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" id="seccion_serie3_seq1">
	        <div class="form-group">
	            <label for="text_seq3_1">1</label>
	            <input type="text" name="text_seq3_1" id="text_seq3_1" class="form-control" value="{{text_seq3_1}}">
	            <select name="text_fix3_1" id="text_fix3_1" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie3_seq2">
	        <div class="form-group">
	            <label for="text_seq3_2">2</label>
	            <input type="text" name="text_seq3_2" id="text_seq3_2" class="form-control" value="{{text_seq3_2}}">
	            <select name="text_fix3_2" id="text_fix3_2" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie3_seq3">
	        <div class="form-group">
	            <label for="text_seq3_3">3</label>
	            <input type="text" name="text_seq3_3" id="text_seq3_3" class="form-control" value="{{text_seq3_3}}">
	            <select name="text_fix3_3" id="text_fix3_3" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie3_seq4">
	        <div class="form-group">
	            <label for="text_seq3_4">4</label>
	            <input type="text" name="text_seq3_4" id="text_seq3_4" class="form-control" value="{{text_seq3_4}}">
	            <select name="text_fix3_4" id="text_fix3_4" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie3_seq5">
	        <div class="form-group">
	            <label for="text_seq3_5">5</label>
	            <input type="text" name="text_seq3_5" id="text_seq3_5" class="form-control" value="{{text_seq3_5}}">
	            <select name="text_fix3_5" id="text_fix3_5" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie3_seq6">
	        <div class="form-group">
	            <label for="text_seq3_6">6</label>
	            <input type="text" name="text_seq3_6" id="text_seq3_6" class="form-control" value="{{text_seq3_6}}">
	            <select name="text_fix3_6" id="text_fix3_6" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie3_seq7">
	        <div class="form-group">
	            <label for="text_seq3_7">7</label>
	            <input type="text" name="text_seq3_7" id="text_seq3_7" class="form-control" value="{{text_seq3_7}}">
	            <select name="text_fix3_7" id="text_fix3_7" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie3_seq8">
	        <div class="form-group">
	            <label for="text_seq3_8">8</label>
	            <input type="text" name="text_seq3_8" id="text_seq3_8" class="form-control" value="{{text_seq3_8}}">
	            <select name="text_fix3_8" id="text_fix3_8" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie3_seq9">
	        <div class="form-group">
	            <label for="text_seq3_9">9</label>
	            <input type="text" name="text_seq3_9" id="text_seq3_9" class="form-control" value="{{text_seq3_9}}">
	            <select name="text_fix3_9" id="text_fix3_9" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie3_seq10">
	        <div class="form-group">
	            <label for="text_seq3_10">10</label>
	            <input type="text" name="text_seq3_10" id="text_seq3_10" class="form-control" value="{{text_seq3_10}}">
	            <select name="text_fix3_10" id="text_fix3_10" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>
    </div>

<div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;background:#fff1db;" id="seccion_bloque_serie4">
        <div class="form-group">
            <label for="text_serie4">Serie 4: </label>
            <input type="text" name="text_serie4" id="text_serie4" class="form-control" value="{{text_serie4}}">
            Nro. Elementos:
            <select name="text_count4" id="text_count4" size="1" onchange="mostrarSeccionesSeries()">
	            <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" id="seccion_serie4_seq1">
	        <div class="form-group">
	            <label for="text_seq4_1">1</label>
	            <input type="text" name="text_seq4_1" id="text_seq4_1" class="form-control" value="{{text_seq4_1}}">
	            <select name="text_fix4_1" id="text_fix4_1" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie4_seq2">
	        <div class="form-group">
	            <label for="text_seq4_2">2</label>
	            <input type="text" name="text_seq4_2" id="text_seq4_2" class="form-control" value="{{text_seq4_2}}">
	            <select name="text_fix4_2" id="text_fix4_2" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie4_seq3">
	        <div class="form-group">
	            <label for="text_seq4_3">3</label>
	            <input type="text" name="text_seq4_3" id="text_seq4_3" class="form-control" value="{{text_seq4_3}}">
	            <select name="text_fix4_3" id="text_fix4_3" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie4_seq4">
	        <div class="form-group">
	            <label for="text_seq4_4">4</label>
	            <input type="text" name="text_seq4_4" id="text_seq4_4" class="form-control" value="{{text_seq4_4}}">
	            <select name="text_fix4_4" id="text_fix4_4" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie4_seq5">
	        <div class="form-group">
	            <label for="text_seq4_5">5</label>
	            <input type="text" name="text_seq4_5" id="text_seq4_5" class="form-control" value="{{text_seq4_5}}">
	            <select name="text_fix4_5" id="text_fix4_5" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie4_seq6">
	        <div class="form-group">
	            <label for="text_seq4_6">6</label>
	            <input type="text" name="text_seq4_6" id="text_seq4_6" class="form-control" value="{{text_seq4_6}}">
	            <select name="text_fix4_6" id="text_fix4_6" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie4_seq7">
	        <div class="form-group">
	            <label for="text_seq4_7">7</label>
	            <input type="text" name="text_seq4_7" id="text_seq4_7" class="form-control" value="{{text_seq4_7}}">
	            <select name="text_fix4_7" id="text_fix4_7" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie4_seq8">
	        <div class="form-group">
	            <label for="text_seq4_8">8</label>
	            <input type="text" name="text_seq4_8" id="text_seq4_8" class="form-control" value="{{text_seq4_8}}">
	            <select name="text_fix4_8" id="text_fix4_8" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie4_seq9">
	        <div class="form-group">
	            <label for="text_seq4_9">9</label>
	            <input type="text" name="text_seq4_9" id="text_seq4_9" class="form-control" value="{{text_seq4_9}}">
	            <select name="text_fix4_9" id="text_fix4_9" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie4_seq10">
	        <div class="form-group">
	            <label for="text_seq4_10">10</label>
	            <input type="text" name="text_seq4_10" id="text_seq4_10" class="form-control" value="{{text_seq4_10}}">
	            <select name="text_fix4_10" id="text_fix4_10" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>
    </div>
    
    
    
    <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;background:#cce9df;" id="seccion_bloque_serie5">
        <div class="form-group">
            <label for="text_serie5">Serie 5: </label>
            <input type="text" name="text_serie5" id="text_serie5" class="form-control" value="{{text_serie5}}">
            Nro. Elementos:
            <select name="text_count5" id="text_count5" size="1" onchange="mostrarSeccionesSeries()">
	            <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" id="seccion_serie5_seq1">
	        <div class="form-group">
	            <label for="text_seq5_1">1</label>
	            <input type="text" name="text_seq5_1" id="text_seq5_1" class="form-control" value="{{text_seq5_1}}">
	            <select name="text_fix5_1" id="text_fix5_1" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie5_seq2">
	        <div class="form-group">
	            <label for="text_seq5_2">2</label>
	            <input type="text" name="text_seq5_2" id="text_seq5_2" class="form-control" value="{{text_seq5_2}}">
	            <select name="text_fix5_2" id="text_fix5_2" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie5_seq3">
	        <div class="form-group">
	            <label for="text_seq5_3">3</label>
	            <input type="text" name="text_seq5_3" id="text_seq5_3" class="form-control" value="{{text_seq5_3}}">
	            <select name="text_fix5_3" id="text_fix5_3" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie5_seq4">
	        <div class="form-group">
	            <label for="text_seq5_4">4</label>
	            <input type="text" name="text_seq5_4" id="text_seq5_4" class="form-control" value="{{text_seq5_4}}">
	            <select name="text_fix5_4" id="text_fix5_4" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie5_seq5">
	        <div class="form-group">
	            <label for="text_seq5_5">5</label>
	            <input type="text" name="text_seq5_5" id="text_seq5_5" class="form-control" value="{{text_seq5_5}}">
	            <select name="text_fix5_5" id="text_fix5_5" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie5_seq6">
	        <div class="form-group">
	            <label for="text_seq5_6">6</label>
	            <input type="text" name="text_seq5_6" id="text_seq5_6" class="form-control" value="{{text_seq5_6}}">
	            <select name="text_fix5_6" id="text_fix5_6" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie5_seq7">
	        <div class="form-group">
	            <label for="text_seq5_7">7</label>
	            <input type="text" name="text_seq5_7" id="text_seq5_7" class="form-control" value="{{text_seq5_7}}">
	            <select name="text_fix5_7" id="text_fix5_7" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie5_seq8">
	        <div class="form-group">
	            <label for="text_seq5_8">8</label>
	            <input type="text" name="text_seq5_8" id="text_seq5_8" class="form-control" value="{{text_seq5_8}}">
	            <select name="text_fix5_8" id="text_fix5_8" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie5_seq9">
	        <div class="form-group">
	            <label for="text_seq5_9">9</label>
	            <input type="text" name="text_seq5_9" id="text_seq5_9" class="form-control" value="{{text_seq5_9}}">
	            <select name="text_fix5_9" id="text_fix5_9" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie5_seq10">
	        <div class="form-group">
	            <label for="text_seq5_10">10</label>
	            <input type="text" name="text_seq5_10" id="text_seq5_10" class="form-control" value="{{text_seq5_10}}">
	            <select name="text_fix5_10" id="text_fix5_10" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>
    </div>
    
    
    <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;background:#f4d9c5;" id="seccion_bloque_serie6">
        <div class="form-group">
            <label for="text_serie6">Serie 6: </label>
            <input type="text" name="text_serie6" id="text_serie6" class="form-control" value="{{text_serie6}}">
            Nro. Elementos:
            <select name="text_count6" id="text_count6" size="1" onchange="mostrarSeccionesSeries()">
	            <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" id="seccion_serie6_seq1">
	        <div class="form-group">
	            <label for="text_seq6_1">1</label>
	            <input type="text" name="text_seq6_1" id="text_seq6_1" class="form-control" value="{{text_seq6_1}}">
	            <select name="text_fix6_1" id="text_fix6_1" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie6_seq2">
	        <div class="form-group">
	            <label for="text_seq6_2">2</label>
	            <input type="text" name="text_seq6_2" id="text_seq6_2" class="form-control" value="{{text_seq6_2}}">
	            <select name="text_fix6_2" id="text_fix6_2" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie6_seq3">
	        <div class="form-group">
	            <label for="text_seq6_3">3</label>
	            <input type="text" name="text_seq6_3" id="text_seq6_3" class="form-control" value="{{text_seq6_3}}">
	            <select name="text_fix6_3" id="text_fix6_3" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie6_seq4">
	        <div class="form-group">
	            <label for="text_seq6_4">4</label>
	            <input type="text" name="text_seq6_4" id="text_seq6_4" class="form-control" value="{{text_seq6_4}}">
	            <select name="text_fix6_4" id="text_fix6_4" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie6_seq5">
	        <div class="form-group">
	            <label for="text_seq6_5">5</label>
	            <input type="text" name="text_seq6_5" id="text_seq6_5" class="form-control" value="{{text_seq6_5}}">
	            <select name="text_fix6_5" id="text_fix6_5" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie6_seq6">
	        <div class="form-group">
	            <label for="text_seq6_6">6</label>
	            <input type="text" name="text_seq6_6" id="text_seq6_6" class="form-control" value="{{text_seq6_6}}">
	            <select name="text_fix6_6" id="text_fix6_6" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie6_seq7">
	        <div class="form-group">
	            <label for="text_seq6_7">7</label>
	            <input type="text" name="text_seq6_7" id="text_seq6_7" class="form-control" value="{{text_seq6_7}}">
	            <select name="text_fix6_7" id="text_fix6_7" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie6_seq8">
	        <div class="form-group">
	            <label for="text_seq6_8">8</label>
	            <input type="text" name="text_seq6_8" id="text_seq6_8" class="form-control" value="{{text_seq6_8}}">
	            <select name="text_fix6_8" id="text_fix6_8" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie6_seq9">
	        <div class="form-group">
	            <label for="text_seq6_9">9</label>
	            <input type="text" name="text_seq6_9" id="text_seq6_9" class="form-control" value="{{text_seq6_9}}">
	            <select name="text_fix6_9" id="text_fix6_9" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie6_seq10">
	        <div class="form-group">
	            <label for="text_seq6_10">10</label>
	            <input type="text" name="text_seq6_10" id="text_seq6_10" class="form-control" value="{{text_seq6_10}}">
	            <select name="text_fix6_10" id="text_fix6_10" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>
    </div>

<div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;background:#fff1db;" id="seccion_bloque_serie7">
        <div class="form-group">
            <label for="text_serie7">Serie 7: </label>
            <input type="text" name="text_serie7" id="text_serie7" class="form-control" value="{{text_serie7}}">
            Nro. Elementos:
            <select name="text_count7" id="text_count7" size="1" onchange="mostrarSeccionesSeries()">
	            <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" id="seccion_serie7_seq1">
	        <div class="form-group">
	            <label for="text_seq7_1">1</label>
	            <input type="text" name="text_seq7_1" id="text_seq7_1" class="form-control" value="{{text_seq7_1}}">
	            <select name="text_fix7_1" id="text_fix7_1" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie7_seq2">
	        <div class="form-group">
	            <label for="text_seq7_2">2</label>
	            <input type="text" name="text_seq7_2" id="text_seq7_2" class="form-control" value="{{text_seq7_2}}">
	            <select name="text_fix7_2" id="text_fix7_2" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie7_seq3">
	        <div class="form-group">
	            <label for="text_seq7_3">3</label>
	            <input type="text" name="text_seq7_3" id="text_seq7_3" class="form-control" value="{{text_seq7_3}}">
	            <select name="text_fix7_3" id="text_fix7_3" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie7_seq4">
	        <div class="form-group">
	            <label for="text_seq7_4">4</label>
	            <input type="text" name="text_seq7_4" id="text_seq7_4" class="form-control" value="{{text_seq7_4}}">
	            <select name="text_fix7_4" id="text_fix7_4" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie7_seq5">
	        <div class="form-group">
	            <label for="text_seq7_5">5</label>
	            <input type="text" name="text_seq7_5" id="text_seq7_5" class="form-control" value="{{text_seq7_5}}">
	            <select name="text_fix7_5" id="text_fix7_5" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie7_seq6">
	        <div class="form-group">
	            <label for="text_seq7_6">6</label>
	            <input type="text" name="text_seq7_6" id="text_seq7_6" class="form-control" value="{{text_seq7_6}}">
	            <select name="text_fix7_6" id="text_fix7_6" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie7_seq7">
	        <div class="form-group">
	            <label for="text_seq7_7">7</label>
	            <input type="text" name="text_seq7_7" id="text_seq7_7" class="form-control" value="{{text_seq7_7}}">
	            <select name="text_fix7_7" id="text_fix7_7" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie7_seq8">
	        <div class="form-group">
	            <label for="text_seq7_8">8</label>
	            <input type="text" name="text_seq7_8" id="text_seq7_8" class="form-control" value="{{text_seq7_8}}">
	            <select name="text_fix7_8" id="text_fix7_8" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie7_seq9">
	        <div class="form-group">
	            <label for="text_seq7_9">9</label>
	            <input type="text" name="text_seq7_9" id="text_seq7_9" class="form-control" value="{{text_seq7_9}}">
	            <select name="text_fix7_9" id="text_fix7_9" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie7_seq10">
	        <div class="form-group">
	            <label for="text_seq7_10">10</label>
	            <input type="text" name="text_seq7_10" id="text_seq7_10" class="form-control" value="{{text_seq7_10}}">
	            <select name="text_fix7_10" id="text_fix7_10" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>
    </div>  
    
    
    <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;background:#cce9df;" id="seccion_bloque_serie8">
        <div class="form-group">
            <label for="text_serie8">Serie 8: </label>
            <input type="text" name="text_serie8" id="text_serie8" class="form-control" value="{{text_serie8}}">
            Nro. Elementos:
            <select name="text_count8" id="text_count8" size="1" onchange="mostrarSeccionesSeries()">
	            <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" id="seccion_serie8_seq1">
	        <div class="form-group">
	            <label for="text_seq8_1">1</label>
	            <input type="text" name="text_seq8_1" id="text_seq8_1" class="form-control" value="{{text_seq8_1}}">
	            <select name="text_fix8_1" id="text_fix8_1" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie8_seq2">
	        <div class="form-group">
	            <label for="text_seq8_2">2</label>
	            <input type="text" name="text_seq8_2" id="text_seq8_2" class="form-control" value="{{text_seq8_2}}">
	            <select name="text_fix8_2" id="text_fix8_2" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie8_seq3">
	        <div class="form-group">
	            <label for="text_seq8_3">3</label>
	            <input type="text" name="text_seq8_3" id="text_seq8_3" class="form-control" value="{{text_seq8_3}}">
	            <select name="text_fix8_3" id="text_fix8_3" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie8_seq4">
	        <div class="form-group">
	            <label for="text_seq8_4">4</label>
	            <input type="text" name="text_seq8_4" id="text_seq8_4" class="form-control" value="{{text_seq8_4}}">
	            <select name="text_fix8_4" id="text_fix8_4" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie8_seq5">
	        <div class="form-group">
	            <label for="text_seq8_5">5</label>
	            <input type="text" name="text_seq8_5" id="text_seq8_5" class="form-control" value="{{text_seq8_5}}">
	            <select name="text_fix8_5" id="text_fix8_5" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie8_seq6">
	        <div class="form-group">
	            <label for="text_seq8_6">6</label>
	            <input type="text" name="text_seq8_6" id="text_seq8_6" class="form-control" value="{{text_seq8_6}}">
	            <select name="text_fix8_6" id="text_fix8_6" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie8_seq7">
	        <div class="form-group">
	            <label for="text_seq8_7">7</label>
	            <input type="text" name="text_seq8_7" id="text_seq8_7" class="form-control" value="{{text_seq8_7}}">
	            <select name="text_fix8_7" id="text_fix8_7" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie8_seq8">
	        <div class="form-group">
	            <label for="text_seq8_8">8</label>
	            <input type="text" name="text_seq8_8" id="text_seq8_8" class="form-control" value="{{text_seq8_8}}">
	            <select name="text_fix8_8" id="text_fix8_8" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie8_seq9">
	        <div class="form-group">
	            <label for="text_seq8_9">9</label>
	            <input type="text" name="text_seq8_9" id="text_seq8_9" class="form-control" value="{{text_seq8_9}}">
	            <select name="text_fix8_9" id="text_fix8_9" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie8_seq10">
	        <div class="form-group">
	            <label for="text_seq8_10">10</label>
	            <input type="text" name="text_seq8_10" id="text_seq8_10" class="form-control" value="{{text_seq8_10}}">
	            <select name="text_fix8_10" id="text_fix8_10" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>
    </div>  
    
    
    <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;background:#f4d9c5;" id="seccion_bloque_serie9">
        <div class="form-group">
            <label for="text_serie9">Serie 9: </label>
            <input type="text" name="text_serie9" id="text_serie9" class="form-control" value="{{text_serie9}}">
            Nro. Elementos:
            <select name="text_count9" id="text_count9" size="1" onchange="mostrarSeccionesSeries()">
	            <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" id="seccion_serie9_seq1">
	        <div class="form-group">
	            <label for="text_seq9_1">1</label>
	            <input type="text" name="text_seq9_1" id="text_seq9_1" class="form-control" value="{{text_seq9_1}}">
	            <select name="text_fix9_1" id="text_fix9_1" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie9_seq2">
	        <div class="form-group">
	            <label for="text_seq9_2">2</label>
	            <input type="text" name="text_seq9_2" id="text_seq9_2" class="form-control" value="{{text_seq9_2}}">
	            <select name="text_fix9_2" id="text_fix9_2" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie9_seq3">
	        <div class="form-group">
	            <label for="text_seq9_3">3</label>
	            <input type="text" name="text_seq9_3" id="text_seq9_3" class="form-control" value="{{text_seq9_3}}">
	            <select name="text_fix9_3" id="text_fix9_3" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie9_seq4">
	        <div class="form-group">
	            <label for="text_seq9_4">4</label>
	            <input type="text" name="text_seq9_4" id="text_seq9_4" class="form-control" value="{{text_seq9_4}}">
	            <select name="text_fix9_4" id="text_fix9_4" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie9_seq5">
	        <div class="form-group">
	            <label for="text_seq9_5">5</label>
	            <input type="text" name="text_seq9_5" id="text_seq9_5" class="form-control" value="{{text_seq9_5}}">
	            <select name="text_fix9_5" id="text_fix9_5" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie9_seq6">
	        <div class="form-group">
	            <label for="text_seq9_6">6</label>
	            <input type="text" name="text_seq9_6" id="text_seq9_6" class="form-control" value="{{text_seq9_6}}">
	            <select name="text_fix9_6" id="text_fix9_6" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie9_seq7">
	        <div class="form-group">
	            <label for="text_seq9_7">7</label>
	            <input type="text" name="text_seq9_7" id="text_seq9_7" class="form-control" value="{{text_seq9_7}}">
	            <select name="text_fix9_7" id="text_fix9_7" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie9_seq8">
	        <div class="form-group">
	            <label for="text_seq9_8">8</label>
	            <input type="text" name="text_seq9_8" id="text_seq9_8" class="form-control" value="{{text_seq9_8}}">
	            <select name="text_fix9_8" id="text_fix9_8" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie9_seq9">
	        <div class="form-group">
	            <label for="text_seq9_9">9</label>
	            <input type="text" name="text_seq9_9" id="text_seq9_9" class="form-control" value="{{text_seq9_9}}">
	            <select name="text_fix9_9" id="text_fix9_9" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie9_seq10">
	        <div class="form-group">
	            <label for="text_seq9_10">10</label>
	            <input type="text" name="text_seq9_10" id="text_seq9_10" class="form-control" value="{{text_seq9_10}}">
	            <select name="text_fix9_10" id="text_fix9_10" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>
    </div>  
    
    
    <div style="border-radius:5px;border:solid 2px #dedede;margin:5px;padding:5px;text-align:center;background:#fff1db;" id="seccion_bloque_serie10">
        <div class="form-group">
            <label for="text_serie10">Serie 10: </label>
            <input type="text" name="text_serie10" id="text_serie10" class="form-control" value="{{text_serie10}}">
            Nro. Elementos:
            <select name="text_count10" id="text_count10" size="1" onchange="mostrarSeccionesSeries()">
	            <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" id="seccion_serie10_seq1">
	        <div class="form-group">
	            <label for="text_seq10_1">1</label>
	            <input type="text" name="text_seq10_1" id="text_seq10_1" class="form-control" value="{{text_seq10_1}}">
	            <select name="text_fix10_1" id="text_fix10_1" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie10_seq2">
	        <div class="form-group">
	            <label for="text_seq10_2">2</label>
	            <input type="text" name="text_seq10_2" id="text_seq10_2" class="form-control" value="{{text_seq10_2}}">
	            <select name="text_fix10_2" id="text_fix10_2" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie10_seq3">
	        <div class="form-group">
	            <label for="text_seq10_3">3</label>
	            <input type="text" name="text_seq10_3" id="text_seq10_3" class="form-control" value="{{text_seq10_3}}">
	            <select name="text_fix10_3" id="text_fix10_3" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie10_seq4">
	        <div class="form-group">
	            <label for="text_seq10_4">4</label>
	            <input type="text" name="text_seq10_4" id="text_seq10_4" class="form-control" value="{{text_seq10_4}}">
	            <select name="text_fix10_4" id="text_fix10_4" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie10_seq5">
	        <div class="form-group">
	            <label for="text_seq10_5">5</label>
	            <input type="text" name="text_seq10_5" id="text_seq10_5" class="form-control" value="{{text_seq10_5}}">
	            <select name="text_fix10_5" id="text_fix10_5" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie10_seq6">
	        <div class="form-group">
	            <label for="text_seq10_6">6</label>
	            <input type="text" name="text_seq10_6" id="text_seq10_6" class="form-control" value="{{text_seq10_6}}">
	            <select name="text_fix10_6" id="text_fix10_6" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie10_seq7">
	        <div class="form-group">
	            <label for="text_seq10_7">7</label>
	            <input type="text" name="text_seq10_7" id="text_seq10_7" class="form-control" value="{{text_seq10_7}}">
	            <select name="text_fix10_7" id="text_fix10_7" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie10_seq8">
	        <div class="form-group">
	            <label for="text_seq10_8">8</label>
	            <input type="text" name="text_seq10_8" id="text_seq10_8" class="form-control" value="{{text_seq10_8}}">
	            <select name="text_fix10_8" id="text_fix10_8" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	</div>

<div class="row">
	    <div class="col-md-6" id="seccion_serie10_seq9">
	        <div class="form-group">
	            <label for="text_seq10_9">9</label>
	            <input type="text" name="text_seq10_9" id="text_seq10_9" class="form-control" value="{{text_seq10_9}}">
	            <select name="text_fix10_9" id="text_fix10_9" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </div>
	    </div>
	    <div class="col-md-6" id="seccion_serie10_seq10">
	        <div class="form-group">
	            <label for="text_seq10_10">10</label>
	            <input type="text" name="text_seq10_10" id="text_seq10_10" class="form-control" value="{{text_seq10_10}}">
	            <select name="text_fix10_10" id="text_fix10_10" class="form-control">
	    <option value="0">Arrastrable</option>
            <option value="1">Fijo</option>
        </select>
	        </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>
        
      
        
    <script>
            var max_secciones_datos=10;
            
            var max_secciones_series=10;
            
            function mostrarSeccionesDatos()
       	    {
       	    	var cantidad=parseInt(document.getElementById('text_cantidad_datos').value);
       	    	
       	    	for(let dd=1;dd<=cantidad;dd++){
       	    	    document.getElementById('seccion_bloque_serie'+dd.toString()).style.display='block';
       	    	}
       	    	for(let dd=cantidad+1;dd<=max_secciones_datos;dd++){
       	    	    document.getElementById('seccion_bloque_serie'+dd.toString()).style.display='none';
       	    	}
       	    }
       	    
       	    function mostrarSeccionSerie(num_seccion)
       	    {
       	    	
       	    	var cantidad=parseInt(document.getElementById('text_count'+num_seccion).value);
       	    	
       	    	for(let dd=1;dd<=cantidad;dd++){
       	    	    document.getElementById('seccion_serie'+num_seccion+'_seq'+dd.toString()).style.display='block';
       	    	}
       	    	for(let dd=cantidad+1;dd<=max_secciones_series;dd++){
       	    	    document.getElementById('seccion_serie'+num_seccion+'_seq'+dd.toString()).style.display='none';
       	    	}
       	    	
       	    }
       	    
       	    function mostrarSeccionesSeries()
       	    {
	       	mostrarSeccionSerie('1');
	       	mostrarSeccionSerie('2');
	       	mostrarSeccionSerie('3');
	       	mostrarSeccionSerie('4');
	       	mostrarSeccionSerie('5');
	       	mostrarSeccionSerie('6');
	       	mostrarSeccionSerie('7');
	       	mostrarSeccionSerie('8');
	       	mostrarSeccionSerie('9');
	       	mostrarSeccionSerie('10');
       	    }

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","color_fondo1":"#073763","color_fondo2":"#674ea7","textarea_informaciones":"<h3>\ud83d\udcda Información del Juego</h3>\r\n<p><strong>Objetivo:</strong> Debe completar las sucesiones numéricas.</p>\r\n<p><strong>Tipo de puntuación:</strong></p>\r\n<ul>\r\n<li>Respuesta correcta: +1 punto</li>\r\n<li>Respuesta incorrecta: -1 punto</li>\r\n</ul>\r\n<p><strong>Instrucciones:</strong> Arrastra los números a las casillas para completar correctamente la serie.</p>","textarea_titulojuego":"<h1>Sucesiones Numéricas</h1>","textarea_instrucciones":"<h2>Arrastra los números y completa las sucesiones numéricas</h2>","text_cantidad_datos":"3","text_serie1":"Serie 1","text_seq1_1":"1","text_seq1_2":"3","text_seq1_3":"5","text_seq1_4":"7","text_seq1_5":"9","text_seq1_6":"11","text_seq1_7":"13","text_seq1_8":"15","text_seq1_9":"17","text_seq1_10":"19","text_fix1_1":"1","text_fix1_2":"1","text_fix1_3":"1","text_fix1_4":"0","text_fix1_5":"0","text_fix1_6":"0","text_fix1_7":"0","text_fix1_8":"1","text_fix1_9":"0","text_fix1_10":"0","text_serie2":"Serie 2","text_seq2_1":"10","text_seq2_2":"12","text_seq2_3":"14","text_seq2_4":"16","text_seq2_5":"18","text_seq2_6":"20","text_seq2_7":"22","text_seq2_8":"24","text_seq2_9":"26","text_seq2_10":"28","text_fix2_1":"1","text_fix2_2":"1","text_fix2_3":"1","text_fix2_4":"0","text_fix2_5":"0","text_fix2_6":"0","text_fix2_7":"0","text_fix2_8":"1","text_fix2_9":"0","text_fix2_10":"0","text_serie3":"Serie 3","text_seq3_1":"6","text_seq3_2":"9","text_seq3_3":"12","text_seq3_4":"15","text_seq3_5":"18","text_seq3_6":"21","text_seq3_7":"24","text_seq3_8":"27","text_seq3_9":"30","text_seq3_10":"33","text_fix3_1":"1","text_fix3_2":"1","text_fix3_3":"1","text_fix3_4":"0","text_fix3_5":"0","text_fix3_6":"0","text_fix3_7":"0","text_fix3_8":"1","text_fix3_9":"0","text_fix3_10":"0","img_bloque1_icono1":"\ud83d\ude82","img_bloque2_icono2":"\ud83d\ude9c","text_bloque2_titulo2":"Completa las Series","text_bloque1_titulo1":"N\u00fameros Disponibles","text_count1":"7","text_count2":"7","text_count3":"7","text_count4":"6","text_serie4":"B","text_seq4_1":"1","text_seq4_2":"2","text_seq4_3":"3","text_seq4_4":"4","text_seq4_5":"5","text_seq4_6":"6","text_seq4_7":"7","text_seq4_8":"8","text_seq4_9":"9","text_seq4_10":"10","text_fix4_1":"1","text_fix4_2":"1","text_fix4_3":"1","text_fix4_4":"0","text_fix4_5":"0","text_fix4_6":"0","text_fix4_7":"0","text_fix4_8":"0","text_fix4_9":"0","text_fix4_10":"0","text_count5":"6","text_serie5":"H","text_seq5_1":"1","text_seq5_2":"2","text_seq5_3":"3","text_seq5_4":"4","text_seq5_5":"5","text_seq5_6":"6","text_seq5_7":"7","text_seq5_8":"8","text_seq5_9":"8","text_seq5_10":"19","text_fix5_1":"1","text_fix5_2":"1","text_fix5_3":"1","text_fix5_4":"0","text_fix5_5":"0","text_fix5_6":"0","text_fix5_7":"0","text_fix5_8":"0","text_fix5_9":"0","text_fix5_10":"0","text_count6":"6","text_serie6":"X","text_seq6_1":"1","text_seq6_2":"2","text_seq6_3":"3","text_seq6_4":"4","text_seq6_5":"5","text_seq6_6":"6","text_seq6_7":"7","text_seq6_8":"8","text_seq6_9":"9","text_seq6_10":"10","text_fix6_1":"1","text_fix6_2":"1","text_fix6_3":"1","text_fix6_4":"0","text_fix6_5":"0","text_fix6_6":"0","text_fix6_7":"0","text_fix6_8":"0","text_fix6_9":"0","text_fix6_10":"0","text_count7":"6","text_serie7":"A","text_seq7_1":"1","text_seq7_2":"2","text_seq7_3":"3","text_seq7_4":"4","text_seq7_5":"5","text_seq7_6":"6","text_seq7_7":"7","text_seq7_8":"8","text_seq7_9":"9","text_seq7_10":"10","text_fix7_1":"1","text_fix7_2":"1","text_fix7_3":"1","text_fix7_4":"0","text_fix7_5":"0","text_fix7_6":"0","text_fix7_7":"0","text_fix7_8":"0","text_fix7_9":"0","text_fix7_10":"0","text_count8":"6","text_serie8":"F","text_seq8_1":"1","text_seq8_2":"2","text_seq8_3":"3","text_seq8_4":"4","text_seq8_5":"5","text_seq8_6":"6","text_seq8_7":"7","text_seq8_8":"8","text_seq8_9":"9","text_seq8_10":"10","text_fix8_1":"1","text_fix8_2":"1","text_fix8_3":"1","text_fix8_4":"0","text_fix8_5":"0","text_fix8_6":"0","text_fix8_7":"0","text_fix8_8":"0","text_fix8_9":"0","text_fix8_10":"0","text_count9":"6","text_serie9":"D","text_seq9_1":"1","text_seq9_2":"2","text_seq9_3":"3","text_seq9_4":"4","text_seq9_5":"5","text_seq9_6":"6","text_seq9_7":"7","text_seq9_8":"8","text_seq9_9":"9","text_seq9_10":"10","text_fix9_1":"1","text_fix9_2":"1","text_fix9_3":"1","text_fix9_4":"0","text_fix9_5":"0","text_fix9_6":"0","text_fix9_7":"0","text_fix9_8":"0","text_fix9_9":"0","text_fix9_10":"0","text_count10":"6","text_serie10":"Y","text_seq10_1":"1","text_seq10_2":"2","text_seq10_3":"3","text_seq10_4":"4","text_seq10_5":"5","text_seq10_6":"6","text_seq10_7":"7","text_seq10_8":"8","text_seq10_9":"9","text_seq10_10":"10","text_fix10_1":"1","text_fix10_2":"1","text_fix10_3":"1","text_fix10_4":"0","text_fix10_5":"0","text_fix10_6":"0","text_fix10_7":"0","text_fix10_8":"0","text_fix10_9":"0","text_fix10_10":"0"}