JavaScript CSS Move elements

Question

Dear programmers I'm working on a website project to help students to learn English. The site supposed to give a student random words then the student must sort these words correctly to make sentences or questions. I am stuck at elements movement, the buttons must move to next each other when the student clicks on them, I've made the buttons move but it's not working as I want. at last Thanks for your patience This is my code Note: I'm not an English native speaker sorry if there is an error in my language.

var question=["Does","he","play","chess","?"];
var randquestion=shuffle(question);
document.getElementById("message").innerHTML=question.length;
var temp="";

for(var i=0;i<question.length;i++)
{
  temp+="<button name=btn class='button button1' id='animate' type=button onclick='myFunction'>"+randquestion[i]+"</button>";
}
document.getElementById("message").innerHTML=temp;
for(var i=0;i<question.length;i++)
{
  document.getElementsByName("btn")[i].onclick=myFunction;
}

function myFunction() 
{
  myMoveDown(this);
}
var id = null;
function myMoveDown(elm) {
  var elem = elm;  
  var pos = 0;
  var pos2=0;
  clearInterval(id);
 id = setInterval(frame, 3);
  function frame() {
    if (pos == 250) {
      clearInterval(id);
    } else {
      pos+=10; pos2-=10;
      elem.style.top= pos + "px"; 
      elem.style.left = pos2 + "px"; 
    }
  }
}

function getRndInteger(min, max) {
  //This JavaScript function always returns 
  //a random number between min and max (both included)
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;
  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

body {
  background-color: #1E0555;
  text-align: center;
}
.button {
  border: 4px;
  border-radius: 5px;
  border-color: black;
  color:black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  margin: 1px 4px;
  cursor: pointer;
}
.button1 {background-color: #b1f01f;} /* Green */

.divStyle{
  margin: 100px 4px;
  text-align:left;
}
#animate {
  border: 4px;
  border-radius: 5px;
  border-color: black;
  color:black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  margin: 1px 4px;
  cursor: pointer;
  position:relative;
  background-color: #b1f01f;;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Learn English" />
    <title>Document</title>
    <link rel="stylesheet" href="CSS/myStyle.css" />
  </head>
  <body>
    <div id="message"></div>
    <div class="divStyle" id="message2"></div>

    <script src="index.js"></script>
  </body>
</html>

Please create a runnable Snippet, including html, css, and js, and document exactly what is not working. Others can then include a modified (fixed) version of your Snippet in their answer. — Lil Devil
– Lil Devil, Commented Mar 17, 2021 at 17:10
Dear Mr.Lil Devil Thanks for your notes I created the snippet as you asked. I hope you can help me. — Stefano
– Stefano, Commented Mar 17, 2021 at 17:57
on click of each button, you want to correctly place the buttons as per the English grammar right , so in this case - Does he play chess ? ? — Lakshya Thakur
– Lakshya Thakur, Commented Mar 17, 2021 at 18:48

Lakshya Thakur · Accepted Answer · 2021-03-17 20:36:18Z

It's probably less fancy than what you want but I wanted to use order and flex to take care of the ordering problem happening in your myMoveDown implementation. Mine is a simple one that takes the clues form the actualWordIndex of each question word as it should be and applies the same as CSS.

Still I would say to lookout for better answers. This is just one of many ways (not accessibility friendly though). Maybe I will add some other implementation if it strikes (Probably in other implementations you will still use the actual index but multiply or add a position offset for left as well.).

var question=["Does","he","play","chess","?"];
var randquestion=shuffle([...question]);
document.getElementById("message").innerHTML=question.length;
var temp="";

for(var i=0;i<question.length;i++)
{
  temp+="<button name=btn class='button button1' type=button onclick='myFunction()'>"+randquestion[i]+"</button>";
}
document.getElementById("message").innerHTML=temp;
for(var i=0;i<question.length;i++)
{
  document.getElementsByName("btn")[i].onclick=myFunction;
}

let words = document.querySelectorAll("#message > button");

function myFunction() 
{ 
  myMoveDown(this);
}
var id = null;
function myMoveDown(elm) {
  let actualWordIndex = question.indexOf(elm.innerText);
  elm.style.top=`${window.innerHeight - 100}px`;
  elm.style.order = `${actualWordIndex+1}`
}

function getRndInteger(min, max) {
  //This JavaScript function always returns 
  //a random number between min and max (both included)
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;
  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

body {
  background-color: #1E0555;
  text-align: center;
}
#message{
display:flex;
}
.button {
  border: 4px;
  border-radius: 5px;
  border-color: black;
  color:black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
    position:relative;
  font-weight: bold;
  margin: 1px 4px;
  cursor: pointer;
  transition:order 0.2s;
}
.button1 {background-color: #b1f01f;} /* Green */

.divStyle{
  margin: 100px 4px;
  text-align:left;
}

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Learn English" />
    <title>Document</title>
    <link rel="stylesheet" href="CSS/myStyle.css" />
  </head>
  <body>
    <div id="message"></div>
    <div class="divStyle" id="message2"></div>

    <script src="index.js"></script>
  </body>
</html>

Another approach where we use combo of position:relative on messages and position:absolute on each button. We manipulate left position of button here as per the original Index. I have cloned the original nodes to keep track of shuffled left positions to be set to correct index in our visible nodes. One limitation was to give each button an equal width to get proper left position when they get placed in the right order.

var question=["Does","he","play","chess","?"];
var randquestion=shuffle([...question]);
document.getElementById("message").innerHTML=question.length;
var temp="";


for(var i=0;i<question.length;i++)
{
  temp+="<button name=btn class='button button1' type=button onclick='myFunction()'>"+randquestion[i]+"</button>";
}
document.getElementById("message").innerHTML=temp;
let sumLeft = 0;
for(var i=0;i<question.length;i++)
{
 const btn =  document.getElementsByName("btn")[i];
 btn.onclick=myFunction;
 btn.style.left=`${sumLeft}px`;
 sumLeft += parseInt(btn.offsetWidth);
}

let message = document.querySelector("#message");
let clonedMessage = message.cloneNode(true);
let words = document.querySelectorAll("#message > button");
let clonedWords = clonedMessage.children;
function myFunction() 
{ 
  myMoveDown(this);
}
var id = null;
function myMoveDown(elm) {
  let actualWordIndex = question.indexOf(elm.innerText); 
  const orderedLeft = clonedWords[actualWordIndex].style.left;
  const orderedTop = clonedWords[actualWordIndex].style.top;
  elm.style.left = orderedLeft;
  elm.style.top = `${orderedTop+window.innerHeight-80}px`;
}

function getRndInteger(min, max) {
  //This JavaScript function always returns 
  //a random number between min and max (both included)
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;
  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

body {
  background-color: #1E0555;
  text-align: center;
}
#message{
position:relative;
}
.button {
  border: 4px;
  border-radius: 5px;
  border-color: black;
  color:black;
  padding: 15px;
  text-align: center;
  width:100px;
  text-decoration: none;
  display: inline-block;
  
  font-size: 16px;
  position:absolute;
  font-weight: bold;
  margin: 1px 4px;
  cursor: pointer;
  transition:all ease-in 0.2s;
  left:0;
}
.button1 {background-color: #b1f01f;} /* Green */


}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Learn English" />
    <title>Document</title>
    <link rel="stylesheet" href="CSS/myStyle.css" />
  </head>
  <body>
    <div id="message"></div>
    <div class="divStyle" id="message2"></div>

    <script src="index.js"></script>
  </body>
</html>

I bet there is another approach where instead of top and left positioning, transform...translate combo is used.

Collectives™ on Stack Overflow

JavaScript CSS Move elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related