JavaScript - rearrange letters in a word by dragging them

Question

JavaScript - rearrange letters in a word by dragging them

Currently, I am developing a browser game called "WordShuffle".
(The words are in German for testing purposes, if you want to play)

My progress is coming along nicely, but I have decided to change the gameplay mechanics. Instead of typing your guess into a text field to solve the word, I want players to rearrange the letters by dragging and dropping them into the correct order.

Since I am not very skilled in JavaScript (which I believe would work best for this feature), I need some help with that aspect. However, I do need to be able to extract a value from the rearranged word in order to compare it to the correct answer. A submit button will then pass this value.

I created concept art to provide a visual representation:
https://i.sstatic.net/SAyIV.png

https://i.sstatic.net/IdpxO.png

https://i.sstatic.net/ZsV5U.png

https://i.sstatic.net/vyeN3.png

javascript drag-and-drop cpu-word

Answer 1

Answer №1

Check out this demo showcasing the use of jquery-ui sortable and implementing the Fisher-Yates shuffle algorithm:

$(function() {
  $("#wordblock").sortable();
  $("#wordblock").disableSelection();

  const word = 'example';
  let d_word = word.split('');
  shuffle(d_word);

  const lis = [];
  for (let i = 0; i < d_word.length; i++) {
    lis.push('<li class="ui-state-default">' + d_word[i] + '</li>')
  }

  $('#wordblock').html(lis.join(''));

  $('#wordblock').mouseup(function() {
    setTimeout(() => {
      let r_word = '';
      $('#wordblock>li').each(function(e) {
        r_word += $(this).text();
      });
      if (r_word == word) {
        console.log("YOU FOUND IT! : " + r_word);
      } else {
        console.log("Keep trying!");
      }
    }, 0);
  });

});

function shuffle(a, b, c, d) {
  c = a.length;
  while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d
}

#wordblock {
  list-style-type: none;
  margin: 0;
  padding: 0;

  /* prevent text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}  


#wordblock li {
  margin: 3px 3px 3px 0;
  padding: 1px;
  width: 40px;
  float: left;
  font-size: 3em;
  text-align: center;
  cursor: pointer;
  font-family: arial;
  background-color: rgb(0,100,155);
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<ul id="wordblock">
</ul>

Answer 2

Check out this demo showcasing the use of jquery-ui sortable and implementing the Fisher-Yates shuffle algorithm:

$(function() {
  $("#wordblock").sortable();
  $("#wordblock").disableSelection();

  const word = 'example';
  let d_word = word.split('');
  shuffle(d_word);

  const lis = [];
  for (let i = 0; i < d_word.length; i++) {
    lis.push('<li class="ui-state-default">' + d_word[i] + '</li>')
  }

  $('#wordblock').html(lis.join(''));

  $('#wordblock').mouseup(function() {
    setTimeout(() => {
      let r_word = '';
      $('#wordblock>li').each(function(e) {
        r_word += $(this).text();
      });
      if (r_word == word) {
        console.log("YOU FOUND IT! : " + r_word);
      } else {
        console.log("Keep trying!");
      }
    }, 0);
  });

});

function shuffle(a, b, c, d) {
  c = a.length;
  while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d
}

#wordblock {
  list-style-type: none;
  margin: 0;
  padding: 0;

  /* prevent text selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}  


#wordblock li {
  margin: 3px 3px 3px 0;
  padding: 1px;
  width: 40px;
  float: left;
  font-size: 3em;
  text-align: center;
  cursor: pointer;
  font-family: arial;
  background-color: rgb(0,100,155);
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<ul id="wordblock">
</ul>

Answer 3

Answer №2

If you're looking for a way to create a sortable word using jQuery, you can utilize jQuery's Sortable feature which can be found here.

By implementing Sortable, you can arrange each letter of a word in separate div elements. Take a look at this example:

HTML:

<div class="word">
    <div>G</div>
    <div>A</div>
    <div>M</div>
    <div>E</div>
</div>

JS:

$(function () {
    $(".word").sortable();
});

http://jsfiddle.net/dbp2988e/

To complete this task, you would need to iterate over the divs within the main word div, extract each div's content (using .html() method), concatenate them into a single string, and then compare it against the secret word.

Answer 4

If you're looking for a way to create a sortable word using jQuery, you can utilize jQuery's Sortable feature which can be found here.

By implementing Sortable, you can arrange each letter of a word in separate div elements. Take a look at this example:

HTML:

<div class="word">
    <div>G</div>
    <div>A</div>
    <div>M</div>
    <div>E</div>
</div>

JS:

$(function () {
    $(".word").sortable();
});

http://jsfiddle.net/dbp2988e/

To complete this task, you would need to iterate over the divs within the main word div, extract each div's content (using .html() method), concatenate them into a single string, and then compare it against the secret word.

JavaScript - rearrange letters in a word by dragging them

Answer №1

Answer №2

Similar questions

Tips for ensuring all data is properly set before saving in mongoose

When a text is wrapped by an HTML div using absolute positioning, is there a way to prevent it from wrapping without relying on white space

Tips for preloading a small placeholder image before the main content is loaded

What are the steps to utilize webpack for refreshing the script tag in a jade file?

Using jQuery to move a div to a specific location on the page

Using Jquery and Ajax to add information to a database

Issue with improper lighting on Three.Geometry objects when using LambertMaterial in Three.js

Checking for mouse button press during Firefox mouse movement

Attempting to make a slightly bigger than usual AXIOS.post request to a .NET Web API

Why doesn't WebStorm display TypeScript inspection errors in real-time?

What is the best way to hide the next/previous tabs once the jQuery dataTable has been set up using jSON data

Tips for personalizing the Material UI autocomplete drop-down menu

Exploring JSON data with multiple nested layers of iteration

Displaying the currently logged in user's name with NodeJS/ExpressJS/Passport

Utilize React Helmet for Dynamic Page Titles

Utilizing Angular JavaScript for detecting and setting up JDK installations

Troubleshooting: AngularJS ng-repeat not rendering JSON data

Utilizing JQuery for retrieving a filename

Safari failing to load JavaScript on live website

What are the methods for defining fontSize and fontWeight in Quasar using :table-header-style?