Click here for free DL of the app version that can save data.

No:27321

Ordenar automáticamente una lista con 10 nombres s..ALL
Developer User13571｜Date and time 23/12/6 3:10:50
Build time 50.273 sec｜Game capacity 3.265KB｜

Script

Juego de Ordenar Nombres

Luis Martina Ana Carlos María Pedro Laura Diego Adriana José

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <title>Juego de Ordenar Nombres</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
      h1 {
        margin-top: 50px;
      }
      #names-container {
        margin-top: 30px;
      }
      .name {
        display: inline-block;
        margin: 10px;
        padding: 10px;
        border: 2px solid #ccc;
        border-radius: 5px;
        cursor: move;
      }
      .highlight {
        background-color: #b3d4fc;
      }
      #result-message {
        font-weight: bold;
        margin-top: 30px;
      }
    </style>
  </head>
  <body>
    <h1>Juego de Ordenar Nombres</h1>
    
    <div id="names-container">
      <span class="name">Luis</span>
      <span class="name">Martina</span>
      <span class="name">Ana</span>
      <span class="name">Carlos</span>
      <span class="name">María</span>
      <span class="name">Pedro</span>
      <span class="name">Laura</span>
      <span class="name">Diego</span>
      <span class="name">Adriana</span>
      <span class="name">José</span>
    </div>

// Variable para almacenar la posición original de un nombre arrastrado
      let draggedIndex = null;

// Agregar el atributo draggable a los nombres
      names.forEach((name, index) => {
        name.setAttribute('draggable', 'true');
        name.addEventListener('dragstart', (event) => {
          draggedIndex = index;
          event.dataTransfer.setData('text/plain', index);
        });
      });

// Agregar eventos de evento de caída y dragover al contenedor
      namesContainer.addEventListener('dragover', (event) => {
        event.preventDefault();
      });

namesContainer.addEventListener('drop', (event) => {
        event.preventDefault();
        const targetIndex = Number(event.dataTransfer.getData('text/plain'));

// Intercambiar las posiciones de los nombres
        if (draggedIndex !== null && targetIndex !== null && draggedIndex !== targetIndex) {
          const draggedName = names[draggedIndex];
          const targetName = names[targetIndex];

namesContainer.replaceChild(draggedName, targetName);
          namesContainer.insertBefore(targetName, names[draggedIndex]);

draggedIndex = null;
        }
      });

// Comprobar si la lista está ordenada al hacer clic en el contenedor
      namesContainer.addEventListener('click', () => {
        let sorted = true;
        let prevName = null;

names.forEach((name) => {
          if (prevName && prevName.textContent.localeCompare(name.textContent, 'es', { sensitivity: 'base' }) > 0) {
            sorted = false;
          }
          prevName = name;
        });

if (sorted) {
          resultMessage.textContent = '¡Felicidades! La lista está ordenada correctamente.';
        } else {
          resultMessage.textContent = '';
        }
      });
    </script>
  </body>
</html>