How to make a smooth movement of the word?

W

wolron2021-05-17 17:11:28

SVG

wolron, 2021-05-17 17:11:28

How can I make it move smoothly over the bar when I click on a word? And so are all the other words. Then I click on "check" and if it's not correct, then an error is generated, if correct, then the message "true" is displayed.

<!DOCTYPE html>
<html>
<head>
    <title>Блоки</title>
    <meta charset="utf-8">
</head>
<body>

<button type="button" id="r">Проверить</button>

<div>Выберите слова,к которым при множественном числе добавляются -es</div> 

<?xml version="1.0" standalone="no"?>
<svg width="600" height="130" version="1.1" xmlns="http://www.w3.org/2000/svg">


  <line x1="100" x2="400" y1="100" y2="100" stroke="orange" fill="transparent" stroke-width="5"/>
  
</svg>

    <div>an actress(актриса)</div> 
    <div>a dress(платье ) </div>
    <div>wolf(волк) </div>
    <div>a tomato (томат)</div> 
    <div>wife(жена) </div>
    


<?xml version="1.0" standalone="no"?>
<svg width="600" height="130" version="1.1" xmlns="http://www.w3.org/2000/svg">

<div id="rect"></div>


</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

G

Goldd lol, 2021-05-17
@Hacker2282288

On click?
if yes here is the js code
const block = document.getElementById('block');
block.addEventListener('click', () => {
block.classList.add('slide');
});
css
.slide {
margin-left: 1em;
transition: .2s;
}
html
Click me