-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPuzzle de la Línea.html
556 lines (517 loc) · 25.5 KB
/
Puzzle de la Línea.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Puzzle de la Línea Platónica</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
h1, h2 {
text-align: center;
}
#controls {
text-align: center;
margin-bottom: 20px;
}
#word-pool, .dropzone-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 20px;
}
.word {
background-color: #ffffff;
border: 2px solid #333333;
border-radius: 5px;
padding: 10px 15px;
margin: 5px;
cursor: grab;
user-select: none;
}
.dropzone {
background-color: #ffffff;
border: 2px dashed #666666;
border-radius: 5px;
width: 200px;
min-height: 100px;
margin: 10px;
padding: 10px;
transition: background-color 0.3s, border-color 0.3s;
}
.dropzone.over {
border-color: #0000ff;
background-color: #e0e0ff;
}
.columns {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.column {
display: flex;
flex-direction: column;
align-items: center;
}
.column h3 {
margin-bottom: 10px;
}
#score {
text-align: center;
font-size: 1.2em;
margin-top: 20px;
display: none;
}
button {
padding: 10px 20px;
margin: 5px;
font-size: 1em;
cursor: pointer;
}
@media (max-width: 800px) {
.dropzone, .word {
width: 45%;
}
}
</style>
</head>
<body>
<h1>Puzzle de la Línea Platónica</h1>
<div id="controls">
<button id="start-btn">Iniciar Juego</button>
<button id="check-btn" disabled>Verificar Puntuación</button>
<button id="reset-btn" disabled>Volver a Jugar</button>
</div>
<h2>Palabras Disponibles</h2>
<div id="word-pool"></div>
<div class="columns">
<div class="column">
<h3>Eikasia</h3>
<div class="dropzone" id="eikasia-dropzone"></div>
</div>
<div class="column">
<h3>Pistis</h3>
<div class="dropzone" id="pistis-dropzone"></div>
</div>
<div class="column">
<h3>Dianoia</h3>
<div class="dropzone" id="dianoia-dropzone"></div>
</div>
<div class="column">
<h3>Noesis</h3>
<div class="dropzone" id="noesis-dropzone"></div>
</div>
</div>
<div id="score"></div>
<script>
// Listas de ejemplos actualizados y más concretos
const eikasia = [
"Creer en noticias falsas en redes sociales",
"Interpretar mal gráficos engañosos en publicidad",
"Creer en las fake news actuales",
"Aceptar supersticiones medievales",
"Dar crédito al horóscopo",
"Pensar que la Tierra es plana",
"Confiar en imágenes manipuladas con Photoshop",
"Creer que las vacunas causan autismo",
"Pensar que la alquimia puede convertir plomo en oro",
"Asumir que las enfermedades son castigos divinos",
"Usar remedios milagrosos sin base científica",
"Creer que el mundo iba a acabar en el año 1000",
"Pensar que la frenología es ciencia válida",
"Negar que los humanos llegaron a la Luna",
"Pensar que los rayos X curaban enfermedades",
"Usar sangrías médicas para curar",
"Creer bulos sobre alimentos en redes sociales",
"Creer que los gatos negros traen mala suerte",
"Pensar que cadenas de mensajes traen maldiciones",
"Creer que el tamaño del pie mide inteligencia",
"Pensar que la peste negra venía del 'aire corrupto'",
"Confiar en amuletos para la suerte",
"Pensar que los barcos caían por el borde del mundo",
"Creer que el Monte Olimpo era la morada real de dioses",
"Asumir que usamos solo el 10% del cerebro",
"Creer que los cometas son presagios de desastres",
"Pensar que la tecnología 5G causa enfermedades",
"Confiar ciegamente en datos televisivos sin verificar",
"Creer en montajes televisivos que simulan fenómenos reales",
"Pensar que los realities son completamente espontáneos",
"Creer que los programas pseudocientíficos transmiten hechos",
"Asumir como real cualquier contenido manipulado en televisión",
"Confiar en rumores sin verificar en WhatsApp",
"Pensar que los reality shows reflejan la vida real",
"Creer en estafas en línea que parecen legítimas",
"Ver rostros en las nubes (pareidolia)",
"Engaños de magia en espectáculos en vivo",
"Creer que videos deepfake son reales",
"Dejarse llevar por estereotipos en medios de comunicación",
"Fotos editadas que distorsionan la realidad",
"Filtrar la realidad con filtros de Instagram",
"Pensar que los videojuegos reflejan la vida cotidiana",
"Confiar en titulares sensacionalistas",
"Aceptar teorías conspirativas sin pruebas",
"Creer en mitos urbanos sin fundamento",
"Tomar publicidad exagerada como verdad",
"Ver hologramas y pensar que son objetos reales",
"Interpretar mal sueños como premoniciones",
"Creer en horóscopos como predicciones exactas",
"Confundir personajes de ficción con personas reales"
];
const pistis = [
"Confiar en que el sol saldrá cada mañana",
"Usar recetas para cocinar una comida",
"Seguir señales de tráfico al conducir",
"Creer en las leyes de la física básicas",
"Usar medicamentos recetados por un médico",
"Confiar en la estructura de un edificio",
"Plantar semillas esperando que crezcan",
"Entender por qué en invierno hace frío",
"Descubrir cómo los avances médicos alargan la vida de las personas",
"Aprender cómo los árboles producen oxígeno mediante la fotosíntesis",
"Comprender que la Tierra es esférica, aunque ligeramente achatada por los polos",
"Reconocer que el sol sale por el este y se pone por el oeste",
"Analizar por qué en las ciudades grandes el tráfico es más intenso por la mañana y la tarde",
"Investigar cómo el fuego necesita oxígeno para arder",
"Observar cómo las familias tienden a reunirse más durante las festividades",
"Entender el movimiento orbital de la Luna alrededor de la Tierra",
"Explorar cómo la inclinación del eje terrestre provoca el cambio de estaciones",
"Identificar por qué los precios en los mercados locales varían según la temporada",
"Estudiar la razón por la que el sonido viaja más rápido en sólidos que en líquidos o gases",
"Descubrir cómo se forman los glaciares por acumulación de nieve",
"Valorar la importancia de celebrar los cumpleaños cada año",
"Investigar qué ocurre durante una erupción volcánica",
"Comprender por qué las tormentas eléctricas producen rayos y truenos",
"Reconocer la relevancia del acceso a internet en las sociedades modernas",
"Analizar cómo la atracción gravitacional de la Luna influye en las mareas",
"Examinar cómo los peces respiran oxígeno disuelto en el agua",
"Observar cómo las personas interactúan más con sus vecinos en zonas rurales",
"Descubrir cómo las plantas crecen hacia la luz gracias al fototropismo",
"Entender por qué el hierro es atraído por los imanes",
"Valorar la disponibilidad de los supermercados abiertos casi todos los días del año",
"Estudiar cómo las bacterias descomponen la materia orgánica",
"Reflexionar sobre la importancia de que los niños asistan a la escuela desde temprana edad",
"Analizar por qué la velocidad de la luz supera a la del sonido",
"Investigar las tradiciones de compartir comida típica en los festivales",
"Comprender por qué los días son más largos en verano que en invierno",
"Descubrir de qué están hechas las estrellas, como hidrógeno y helio",
"Analizar las razones de las grandes variaciones de temperatura en el desierto",
"Estudiar cómo los rayos UV del sol pueden dañar la piel",
"Observar cómo se producen los ecos al rebotar el sonido en superficies duras",
"Reflexionar sobre cómo las personas disfrutan del fin de semana con actividades de ocio",
"Comprender por qué el agua salada del mar no es apta para beber",
"Explorar cómo los fósiles preservan los restos de seres vivos antiguos",
"Creer en la eficacia del ejercicio físico",
"Observar el cambio de estaciones",
"Usar mapas para navegar en una ciudad",
"Confiar en la electricidad al encender una luz",
"Creer en la gravedad al ver caer objetos",
"Aceptar el ciclo del agua en la naturaleza",
"Usar herramientas para construir algo",
"Seguir instrucciones para armar un mueble",
"Creer en la información de un libro de texto",
"Observar comportamientos animales en la naturaleza",
"Confiar en pronósticos del clima basados en patrones",
"Usar dispositivos tecnológicos diariamente",
"Medir ingredientes para hornear un pastel"
];
const dianoia = [
"Resolver ecuaciones algebraicas",
"Probar teoremas geométricos",
"Analizar datos estadísticos para conclusiones",
"Programar algoritmos complejos",
"Desarrollar modelos para predecir tendencias económicas",
"Formular hipótesis científicas y probarlas",
"Crear pruebas en cálculo matemático",
"Diseñar experimentos para testear teorías",
"Entender principios avanzados de física",
"Explorar conceptos abstractos en matemáticas",
"Planificar estrategias con contingencias",
"Usar lógica para resolver acertijos",
"Conducir investigaciones y analizar resultados",
"Aplicar modelos matemáticos en ingeniería",
"Desarrollar aplicaciones de software",
"Calcular la esperanza media de vida de una sociedad",
"Saber repartir una cantidad de dinero de manera simétrica entre varias personas",
"Determinar la velocidad media de un vehículo en un trayecto",
"Predecir el crecimiento de una población con modelos matemáticos",
"Estimar los costos de un proyecto empresarial a partir de sus insumos",
"Diseñar un presupuesto mensual para un hogar",
"Calcular la cantidad exacta de pintura necesaria para cubrir una superficie",
"Medir el área de una parcela para su venta o cultivo",
"Determinar el porcentaje de descuento en una tienda",
"Analizar las tendencias de un mercado financiero mediante estadísticas",
"Comparar precios entre dos productos para identificar el más rentable",
"Diseñar el trazado más corto entre dos puntos (como en rutas de transporte)",
"Predecir el clima mediante modelos matemáticos en meteorología",
"Analizar los resultados de una encuesta mediante porcentajes",
"Calcular la probabilidad de ganar en un juego de azar",
"Diseñar una dieta equilibrada basada en la proporción de nutrientes",
"Ajustar el tiempo de cocción en una receta al duplicar la cantidad",
"Determinar el interés generado en una cuenta de ahorros",
"Resolver problemas de geometría al construir una casa o mueble",
"Analizar la eficiencia energética de un electrodoméstico",
"Calcular el consumo de gasolina en un viaje",
"Dividir los ingresos entre diferentes gastos fijos y variables",
"Estimar el tiempo necesario para completar un proyecto laboral",
"Determinar la probabilidad de éxito en un experimento científico",
"Comparar la relación calidad-precio de productos en el supermercado",
"Analizar la viabilidad de un negocio mediante proyecciones financieras",
"Resolver problemas de optimización en la planificación de rutas",
"Calcular la proporción de materiales para una mezcla de construcción",
"Diseñar encuestas con muestras representativas de una población",
"Predecir el resultado de elecciones basándose en sondeos",
"Estimar el riesgo de enfermedades en una población mediante modelos",
"Determinar la distribución de ingresos en una comunidad",
"Calcular el peso máximo que un puente puede soportar",
"Analizar patrones en datos históricos para identificar tendencias",
"Debatir argumentos filosóficos con lógica",
"Crear algoritmos de encriptación",
"Modelar escenarios de cambio climático",
"Diseñar circuitos complejos",
"Explorar conceptos teóricos en física cuántica"
];
const noesis = [
"Contemplar la naturaleza misma de la justicia",
"Entender el concepto de belleza más allá de lo físico",
"Aprehender la idea de igualdad como forma abstracta",
"Reflexionar sobre la esencia de la bondad",
"Comprender la naturaleza de la verdad",
"Entender el concepto de infinito",
"Comprender qué es el Ser humano",
"Entender qué es la Belleza",
"Saber cuál es el modelo ideal de Justicia",
"Reflexionar sobre la esencia de la Verdad",
"Identificar qué es el Bien supremo",
"Conocer el significado universal de la Amistad",
"Percibir el modelo ideal de Caballo",
"Comprender en qué consiste la Simetría perfecta",
"Saber cuál es la definición universal de Mamífero",
"Deliberar sobre el modelo ideal de Ciudad",
"Descubrir qué constituye el Orden perfecto",
"Comprender el prototipo de Triángulo equilátero",
"Reflexionar sobre la forma perfecta de un Círculo",
"Entender qué constituye el modelo de Belleza en la Naturaleza",
"Conocer la esencia de la Paz universal",
"Saber cuál es el paradigma de Familia",
"Percibir qué es la Unidad de todas las cosas",
"Comprender el modelo perfecto de Árbol",
"Reflexionar sobre la definición universal de Justicia",
"Descubrir cuál es el modelo de Equilibrio ideal",
"Entender qué constituye la Armonía universal",
"Conocer el arquetipo de Amistad verdadera",
"Saber qué es la Bondad sin límites",
"Identificar el modelo ideal de la Bondad",
"Conocer la forma pura de la Sabiduría",
"Reflexionar sobre el prototipo del Bien común",
"Percibir qué constituye el Amor perfecto",
"Comprender la esencia de la Felicidad absoluta",
"Entender el modelo arquetípico de la Belleza en el arte",
"Reflexionar sobre el Tiempo en su totalidad",
"Conocer el prototipo de una Casa",
"Saber cuál es el modelo ideal de una Silla",
"Percibir la forma perfecta de un Reloj",
"Reflexionar sobre el modelo universal de una Mesa",
"Comprender el arquetipo de una Carreta",
"Contemplar el significado de la existencia",
"Aprehender la esencia del amor como forma",
"Entender la naturaleza del ser",
"Reflexionar sobre la idea de perfección",
"Comprender los principios universales de ética",
"Entender el concepto abstracto del tiempo",
"Aprehender la esencia de la conciencia",
"Contemplar la idea de la sociedad ideal",
"Entender la naturaleza de las verdades matemáticas",
"Reflexionar sobre la esencia del conocimiento en sí",
"Aprehender las leyes universales de la lógica",
"Entender la forma de la belleza en el arte y la naturaleza",
"Contemplar la realidad última más allá de las apariencias",
"Aprehender la interconexión de todas las cosas"
];
// Variables para almacenar las palabras seleccionadas
let selectedWords = [];
let correctAssignments = {};
let score = 0;
// Elementos del DOM
const startBtn = document.getElementById('start-btn');
const checkBtn = document.getElementById('check-btn');
const resetBtn = document.getElementById('reset-btn');
const wordPool = document.getElementById('word-pool');
const scoreDiv = document.getElementById('score');
const dropzones = {
'eikasia': document.getElementById('eikasia-dropzone'),
'pistis': document.getElementById('pistis-dropzone'),
'dianoia': document.getElementById('dianoia-dropzone'),
'noesis': document.getElementById('noesis-dropzone')
};
// Función para seleccionar aleatoriamente n elementos de una lista
function getRandomElements(arr, n) {
const shuffled = arr.slice(0);
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled.slice(0, n);
}
// Función para inicializar el juego
function initializeGame() {
// Limpiar cualquier juego anterior
wordPool.innerHTML = '';
scoreDiv.style.display = 'none';
scoreDiv.innerText = '';
Object.values(dropzones).forEach(dz => dz.innerHTML = '');
checkBtn.disabled = true;
resetBtn.disabled = true;
// Seleccionar 3 palabras de cada categoría
const selectedEikasia = getRandomElements(eikasia, 3);
const selectedPistis = getRandomElements(pistis, 3);
const selectedDianoia = getRandomElements(dianoia, 3);
const selectedNoesis = getRandomElements(noesis, 3);
// Guardar las asignaciones correctas
correctAssignments = {};
selectedEikasia.forEach(word => { correctAssignments[word] = 'eikasia'; });
selectedPistis.forEach(word => { correctAssignments[word] = 'pistis'; });
selectedDianoia.forEach(word => { correctAssignments[word] = 'dianoia'; });
selectedNoesis.forEach(word => { correctAssignments[word] = 'noesis'; });
// Combinar y mezclar todas las palabras
selectedWords = [...selectedEikasia, ...selectedPistis, ...selectedDianoia, ...selectedNoesis];
shuffleArray(selectedWords);
// Crear elementos de palabra y agregarlos al word pool
selectedWords.forEach(word => {
const wordDiv = document.createElement('div');
wordDiv.classList.add('word');
wordDiv.setAttribute('draggable', 'true');
wordDiv.innerText = word;
wordPool.appendChild(wordDiv);
});
// Añadir eventos de drag and drop
addDragAndDropHandlers();
}
// Función para mezclar un array (Fisher-Yates)
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
// Variables para drag and drop
let draggedElement = null;
// Función para añadir manejadores de drag and drop
function addDragAndDropHandlers() {
const words = document.querySelectorAll('.word');
words.forEach(word => {
word.addEventListener('dragstart', dragStart);
word.addEventListener('dragend', dragEnd);
});
Object.values(dropzones).forEach(dropzone => {
dropzone.addEventListener('dragover', dragOver);
dropzone.addEventListener('drop', drop);
dropzone.addEventListener('dragenter', dragEnter);
dropzone.addEventListener('dragleave', dragLeave);
});
wordPool.addEventListener('dragover', dragOver);
wordPool.addEventListener('drop', dropToPool);
wordPool.addEventListener('dragenter', dragEnterPool);
wordPool.addEventListener('dragleave', dragLeavePool);
}
// Manejadores de eventos
function dragStart(e) {
draggedElement = this;
setTimeout(() => {
this.style.display = 'none';
}, 0);
}
function dragEnd(e) {
setTimeout(() => {
this.style.display = 'block';
draggedElement = null;
}, 0);
}
function dragOver(e) {
e.preventDefault();
}
function dragEnter(e) {
e.preventDefault();
this.classList.add('over');
}
function dragLeave(e) {
this.classList.remove('over');
}
function drop(e) {
e.preventDefault();
this.classList.remove('over');
if (this.children.length >= 3) {
alert('Esta columna ya tiene 3 palabras.');
return;
}
if (draggedElement) {
this.appendChild(draggedElement);
checkAllPlaced();
}
}
function dropToPool(e) {
e.preventDefault();
this.classList.remove('over');
if (draggedElement) {
this.appendChild(draggedElement);
checkAllPlaced();
}
}
function dragEnterPool(e) {
e.preventDefault();
this.classList.add('over');
}
function dragLeavePool(e) {
this.classList.remove('over');
}
// Función para verificar si todas las palabras están colocadas
function checkAllPlaced() {
const totalPlaced = Object.values(dropzones).reduce((acc, dz) => acc + dz.children.length, 0);
if (totalPlaced === 12) {
checkBtn.disabled = false;
} else {
checkBtn.disabled = true;
}
}
// Función para verificar la puntuación
function checkScore() {
score = 0;
Object.entries(correctAssignments).forEach(([word, category]) => {
const dropzone = dropzones[category];
for (let child of dropzone.children) {
if (child.innerText === word) {
score++;
break;
}
}
});
scoreDiv.innerText = `Tienes ${score} aciertos de 12.`;
scoreDiv.style.display = 'block';
resetBtn.disabled = false;
checkBtn.disabled = true;
}
// Event listeners para los botones
startBtn.addEventListener('click', () => {
initializeGame();
startBtn.disabled = true;
resetBtn.disabled = true;
scoreDiv.style.display = 'none';
});
checkBtn.addEventListener('click', () => {
checkScore();
});
resetBtn.addEventListener('click', () => {
initializeGame();
checkBtn.disabled = true;
resetBtn.disabled = true;
scoreDiv.style.display = 'none';
startBtn.disabled = false; // Habilita el botón de inicio para una nueva partida
});
// Permitir reiniciar el juego desde el inicio
window.addEventListener('load', () => {
// Inicializar sin palabras hasta que se presione "Iniciar Juego"
});
</script>
</body>
</html>