Genesis Test - Jayson Dixon

Toggle class name on click in jQuery

by dixalex

HTML

<h2>Scrambled</h2>
<div id="scrambled-verse"></div>
<h2>Un-Scrambled</h2>
<div id="unscrambled-verse"></div>
<button id='reset'>
Undo Last
</button>

<!---- 
Change Log:
Version 35: Genesis 1 verse 21
version 37: Genesis 1 verse 24
version 38: Genesis 1 verse 25
varsion 39: Genesis 1 verses 22 - 25
varsion 40: Genesis 1 verses 26
varsion 41: Genesis 1 verses 26 edit
varsion 42: Genesis 1 verses 26 edit
varsion 43: Genesis 1 verses 26 edit
version 44: Genesis 1 verses 27
version 45: Genesis 1 verses 28
version 46: Genesis 1 verses 30
version 47: Update 2.0 ChaptGPT
version 49: Update 2.0 ChaptGPT
version 50/51/52/53: Genesis 2 verses 1 - 3 [03-03-2023]
version 54: Genesis 2 verses 2 [03-03-2023]
version 55: Genesis 2 verses 3 [03-13-2023]
version 20: Genesis 1 verses 20 [10-13-2023]
---->

CSS

body {
  background: #202020;
  padding: 20px;
  color: #FFF;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  margin-top: .5em;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

.injected {
cursor: pointer;
}

.injected:hover {
background-color: #CCC;
}

#scrambled-verse, #unscrambled-verse {
border:solid 2px red;
border-radius: .75em;
padding: .25em;
min-height: 8em;
width: 80%;
min-width: 200px;
font-size: 2.5em;
}

#unscrambled-verse.completed {
border:solid 2px green;
border-radius: .75em;
padding: .25em;
min-height: 8em;
width: 80%;
min-width: 200px;
}

JavaScript

var gen21 = "So God created great sea creatures and every living thing that moves, with which the waters abounded, according to their kind, and every winged bird according to its kind. And God saw that it was good.".split(' ');
var scrambledGen21 = shuffle(gen21);
var unscrambledGen21 = [];

$.each(scrambledGen21, function(index, word) {
  var toInject = $("<span class='injected'>" + word + " </span>");
  toInject.appendTo($('[id=scrambled-verse]'));
});

$('#scrambled-verse *').on('click touch', function(evt) {
  if ($(evt.target).closest($('[id=scrambled-verse]').length > 0)) {
    var word = $(evt.target);
    word.off();
    word.appendTo($('#unscrambled-verse'));
    unscrambledGen21.push(word.text());
  }
  if ($('#unscrambled-verse').text() === gen21.join(" ")) {
    $('#unscrambled-verse').addClass('completed');
  }
});

$('#reset').on('click touch', function(evt) {
  if (unscrambledGen21.length > 0) {
    var lastWord = unscrambledGen21.pop();
    var toInject = $("<span class='injected'>" + lastWord + " </span>");
    toInject.appendTo($('[id=scrambled-verse]'));
    $('#unscrambled-verse > span:last-child').remove();
    toInject.on('click touch', function(evt) {
      if ($(evt.target).closest($('[id=scrambled-verse]').length > 0)) {
        var word = $(evt.target);
        word.off();
        word.appendTo($('#unscrambled-verse'));
        unscrambledGen21.push(word.text());
      }
      if ($('#unscrambled-verse').text() === gen21.join(" ")) {
        $('#unscrambled-verse').addClass('completed');
      }
    });
  }
  $('#unscrambled-verse').removeClass('completed');
});

function shuffle(a, b) {
  return a.length == 0 ? b : function(c) {
    return shuffle(a, (b || []).concat(c));
  }(a.splice(Math.floor(Math.random() * a.length), 1));
};