A sorting game with 4 bins: SSRIs, SNRIs, TCAs, MAOIs. Players have to sort side effects: weight gain, Tyramine interaction, hypertensive crisis, anticholinergic effects, sedation. And sort receptors: H1, a1, muscarinic receptors, into the correct bins.'s game | AI game creator

Click here for free DL of the app version that can save data.

No:26855

58

A sorting game with 4 bins: SSRIs, SNRIs, TCAs, MA..ALL
Developer User13284｜Date and time 23/12/2 20:02:21
Build time 69.102 sec｜Game capacity 6.754KB｜

Sure! Here's a game that meets your requirements:

SSRIs

SNRIs

TCAs

MAOIs

Weight Gain

Weight Gain

Tyramine Interaction

Tyramine Interaction

Hypertensive Crisis

Hypertensive Crisis

Anticholinergic Effects

Anticholinergic Effects

Sedation

Sedation

H1 Receptor

H1 Receptor

a1 Receptor

a1 Receptor

Muscarinic Receptors

Muscarinic Receptors

In this game, players need to drag and drop the side effects and receptors into the correct bins based on their categories. The bins are represented as `div` elements with corresponding IDs (`ssris`, `snris`, `tcas`, `maois`), and the items are represented as `div` elements with draggable attributes and additional data attributes to store their types and categories (`side-effect` or `receptor`, `ssris`, `snris`, `tcas`, `maois`). The players can drag the items and drop them into the correct bins. Once all the items are correctly sorted, a message will be displayed congratulating the player. Please note that you need to replace the image URLs in the code above (`emozi_all/pictogram.png`, `emozi_all/pictogram.png`, etc.) with the actual URLs pointing to the respective pictogram images.

→ 　

0　

0　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

(C)2023 HisashiApp

Sure! Here's a game that meets your requirements:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Sorting Game</title>
    <style>
        #bins {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
        }

.bin {
            width: 100px;
            height: 120px;
            border: 2px solid black;
            text-align: center;
            padding: 10px;
        }

.item {
            width: 80px;
            height: 80px;
            border: 2px solid black;
            margin: 5px;
            padding: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

#message {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="bins">
        <div class="bin" id="ssris">
            <h3>SSRIs</h3>
        </div>
        <div class="bin" id="snris">
            <h3>SNRIs</h3>
        </div>
        <div class="bin" id="tcas">
            <h3>TCAs</h3>
        </div>
        <div class="bin" id="maois">
            <h3>MAOIs</h3>
        </div>
    </div>

<div id="items">
        <div class="item" draggable="true" data-type="side-effect" data-category="ssris">
            <p>Weight Gain</p>
            <img src="weight-gain-pictogram.png" alt="Weight Gain">
        </div>
        <div class="item" draggable="true" data-type="side-effect" data-category="maois">
            <p>Tyramine Interaction</p>
            <img src="tyramine-pictogram.png" alt="Tyramine Interaction">
        </div>
        <div class="item" draggable="true" data-type="side-effect" data-category="maois">
            <p>Hypertensive Crisis</p>
            <img src="hypertensive-crisis-pictogram.png" alt="Hypertensive Crisis">
        </div>
        <div class="item" draggable="true" data-type="side-effect" data-category="tcas">
            <p>Anticholinergic Effects</p>
            <img src="anticholinergic-effects-pictogram.png" alt="Anticholinergic Effects">
        </div>
        <div class="item" draggable="true" data-type="side-effect" data-category="snris">
            <p>Sedation</p>
            <img src="sedation-pictogram.png" alt="Sedation">
        </div>
        <div class="item" draggable="true" data-type="receptor" data-category="ssris">
            <p>H1 Receptor</p>
            <img src="h1-receptor-pictogram.png" alt="H1 Receptor">
        </div>
        <div class="item" draggable="true" data-type="receptor" data-category="maois">
            <p>a1 Receptor</p>
            <img src="a1-receptor-pictogram.png" alt="a1 Receptor">
        </div>
        <div class="item" draggable="true" data-type="receptor" data-category="tcas">
            <p>Muscarinic Receptors</p>
            <img src="muscarinic-receptors-pictogram.png" alt="Muscarinic Receptors">
        </div>
    </div>

<script>
        const bins = document.querySelectorAll('.bin');
        const items = document.querySelectorAll('.item');

items.forEach((item) => {
            item.addEventListener('dragstart', dragStart);
            item.addEventListener('dragend', dragEnd);
        });

bins.forEach((bin) => {
            bin.addEventListener('dragover', dragOver);
            bin.addEventListener('dragenter', dragEnter);
            bin.addEventListener('dragleave', dragLeave);
            bin.addEventListener('drop', drop);
        });

function dragStart() {
            this.classList.add('dragging');
        }

function dragEnd() {
            this.classList.remove('dragging');
        }

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

function dragEnter(event) {
            event.preventDefault();
            this.classList.add('hovered');
        }

function dragLeave() {
            this.classList.remove('hovered');
        }

function drop() {
            const draggableType = document.querySelector('.dragging').dataset.type;
            const draggableCategory = document.querySelector('.dragging').dataset.category;
            const binCategory = this.id;

if (draggableType === 'side-effect' && binCategory === draggableCategory) {
                this.appendChild(document.querySelector('.dragging'));
                this.classList.remove('hovered');
                checkGameStatus();
            } else if (draggableType === 'receptor' && binCategory === draggableCategory) {
                this.appendChild(document.querySelector('.dragging'));
                this.classList.remove('hovered');
                checkGameStatus();
            }
        }

function checkGameStatus() {
            const ssrisBin = document.querySelector('#ssris');
            const snrisBin = document.querySelector('#snris');
            const tcasBin = document.querySelector('#tcas');
            const maoisBin = document.querySelector('#maois');

const ssrisCount = ssrisBin.querySelectorAll('.item').length;
            const snrisCount = snrisBin.querySelectorAll('.item').length;
            const tcasCount = tcasBin.querySelectorAll('.item').length;
            const maoisCount = maoisBin.querySelectorAll('.item').length;

if (ssrisCount === 2 && snrisCount === 1 && tcasCount === 1 && maoisCount === 1) {
                showMessage('Congratulations! You sorted all items correctly!');
            }
        }

function showMessage(message) {
            const messageContainer = document.createElement('div');
            messageContainer.id = 'message';
            messageContainer.innerText = message;
            document.body.appendChild(messageContainer);
        }
    </script>
</body>
</html>
```

In this game, players need to drag and drop the side effects and receptors into the correct bins based on their categories. The bins are represented as `div` elements with corresponding IDs (`ssris`, `snris`, `tcas`, `maois`), and the items are represented as `div` elements with draggable attributes and additional data attributes to store their types and categories (`side-effect` or `receptor`, `ssris`, `snris`, `tcas`, `maois`).

The players can drag the items and drop them into the correct bins. Once all the items are correctly sorted, a message will be displayed congratulating the player.

Please note that you need to replace the image URLs in the code above (`weight-gain-pictogram.png`, `tyramine-pictogram.png`, etc.) with the actual URLs pointing to the respective pictogram images.