How to make a drag and drop game

HOW TO MAKE A DRAG AND DROP GAME USING HTML, JAVASCRIPT, AND CSS

Updated in Rabee' Al Awwal 1441 / October 2020

This code will be about creating a simple drag and drop game. It will include five capitals and five countries, and you are to drag the right capital to its country.

This code will be somewhat limited, which means that if you get all the answers correct, you click on Submit, and you should receive a message. However, if you drag the capital to the wrong country, the capital will go back to its place and you don't lose the game. So the code is about a simple coding for a drag and drop game.

As far as the drop function goes, I distinguished between the Capitals function and the Countries function. I made the countries function as put001, put002, put003, put004, and put005. I also colored them with dark yellow. So, if you want to add more capitals and countries, make sure to look for the dark yellow colors in this code and fix them. Also, don't forget to change the score from (b > 5) to (b > 6) if you want to add a sixth capital and country. More capitals and countries, more values for var b. For example, if you want to add a new capital and a new country (Jakarta, Indonesia), you type this:

<div class="box002" ondrop="drop006(event)"> <text ondragstart="dragStart006(event)" draggable="true" id="target006">Jakarta</text>
    </div>

<div class="box001" ondrop="put006(event)" ondragover="allowDrop006(event)" id="place006">Indonesia</div> // For the country, box001 stays the same

(The above 2 codes are for HTML)

<script>
function dragStart006(event) {
    event.dataTransfer.setData("choice006", event.target.id);
}

function allowDrop006(event) {
    event.preventDefault();
}

function put006(event) {
    var data = event.dataTransfer.getData("choice006");
    event.target.appendChild(document.getElementById(data));
score001.innerHTML = b++;
        place006.innerHTML = "Jakarta";
}
</script>
(Make sure to arrange the functions and HTML tags in their places)

Code:
_______________________________________________________________
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Drop and Drag Game</title>
</head>
<body>
    <style>
        .box001 {
            float: left;
            width: 75px;
            height: 15px;
            margin: 12px;
            padding: 10px;
            border: 1px solid black;
        }

        .box002 {
            float: left;
            width: 75px;
            height: 15px;
            margin: 12px;
            padding: 10px;
            border: 1px solid white;
        }
    </style>
    <p>Score: <text id="score001">0</text></p>

    <div class="box002" ondrop="drop001(event)">
        <text ondragstart="dragStart001(event)" draggable="true" id="target001">Jerusalem</text>
    </div>

    <div class="box002" ondrop="drop002(event)">
        <text ondragstart="dragStart002(event)" draggable="true" id="target002">Amman</text>
    </div>

    <div class="box002" ondrop="drop003(event)">
        <text ondragstart="dragStart003(event)" draggable="true" id="target003">London</text>
    </div>

    <div class="box002" ondrop="drop004(event)">
        <text ondragstart="dragStart004(event)" draggable="true" id="target004">Brasilia</text>
    </div>

    <div class="box002" ondrop="drop005(event)">
        <text ondragstart="dragStart005(event)" draggable="true" id="target005">Ottawa</text></div>

    </div>
    <br /><br /><br /><br />

    <div class="box001" ondrop="put001(event)" ondragover="allowDrop001(event)" id="place001">Palestine</div>

    <div class="box001" ondrop="put002(event)" ondragover="allowDrop002(event)" id="place002">Jordan</div>

    <div class="box001" ondrop="put003(event)" ondragover="allowDrop003(event)" id="place003">UK</div>

    <div class="box001" ondrop="put004(event)" ondragover="allowDrop004(event)" id="place004">Brazil</div>

    <div class="box001" ondrop="put005(event)" ondragover="allowDrop005(event)" id="place005">Canada</div><br /><br /><br />

    <button onclick="submit001()">Submit</button>
    <p id="message001"></p>

    <script>
    var b = 0;
    b++;
function dragStart001(event) {
    event.dataTransfer.setData("choice001", event.target.id);
}

function dragStart002(event) {
    event.dataTransfer.setData("choice002", event.target.id);
}

function dragStart003(event) {
    event.dataTransfer.setData("choice003", event.target.id);
}

function dragStart004(event) {
    event.dataTransfer.setData("choice004", event.target.id);
}

function dragStart005(event) {
    event.dataTransfer.setData("choice005", event.target.id);
}

function allowDrop001(event) {
    event.preventDefault();
}

function allowDrop002(event) {
    event.preventDefault();
}

function allowDrop003(event) {
    event.preventDefault();
}

function allowDrop004(event) {
    event.preventDefault();
}

function allowDrop005(event) {
    event.preventDefault();
}

function put001(event) {
    var data = event.dataTransfer.getData("choice001");
    event.target.appendChild(document.getElementById(data));
score001.innerHTML = b++;
        place001.innerHTML = "Jerusalem";
}

function put002(event) {
    var data = event.dataTransfer.getData("choice002");
    event.target.appendChild(document.getElementById(data));
score001.innerHTML = b++;
        place002.innerHTML = "Amman";
}

function put003(event) {
    var data = event.dataTransfer.getData("choice003");
    event.target.appendChild(document.getElementById(data));
score001.innerHTML = b++;
        place003.innerHTML = "London";
}

function put004(event) {
    var data = event.dataTransfer.getData("choice004");
    event.target.appendChild(document.getElementById(data));
score001.innerHTML = b++;
        place004.innerHTML = "Brasilia";
}

function put005(event) {
    var data = event.dataTransfer.getData("choice005");
    event.target.appendChild(document.getElementById(data));
score001.innerHTML = b++;
        place005.innerHTML = "Ottawa";
}

function drop001(event) {
    event.preventDefault();
}

function drop002(event) {
    event.preventDefault();
}

function drop003(event) {
    event.preventDefault();

}

function drop004(event) {
    event.preventDefault();
}

function drop005(event) {
    event.preventDefault();
}

function submit001() {
if (b > 5) {
message001.innerHTML = "Congratulations.";
}
}
    </script>
</body>
</html>

Here is a video of the above code.

Other Topics:

Crosswords- General Area
Human Body Facts
Binary Digits