← All examples

Red and yellow

Red things go in one basket, yellow ones in the other. A dropped element stays in the basket, and its appearance tells whether it was a good choice (the states good and bad); a wrong choice can be fixed.

Schema
v2.0
Required features
element.imageelement.textelement.componentelement.targetvisual.textvisual.statescomponent.draggabletarget.capacitytarget.snaprule.placeaction.play-soundaction.set-stateaction.emit-particles
Components
imagetexttargetcomponent

How to open it in the editor

  1. Click Open in the editor — GS Editor opens with the exercise loaded (scene and assets).
  2. Or click Download the exercise (a ZIP with projekt.json, images/ and sounds/) and choose Open ZIP in the start window of the editor.

Exercise file

Show the JSON (11,032 characters)
{
  "schema": "2.0",
  "requires": [
    "element.image",
    "element.text",
    "element.component",
    "element.target",
    "visual.text",
    "visual.states",
    "component.draggable",
    "target.capacity",
    "target.snap",
    "rule.place",
    "action.play-sound",
    "action.set-state",
    "action.emit-particles"
  ],
  "id": "mark-and-keep",
  "size": {
    "width": 1200,
    "height": 675
  },
  "languages": [
    "pl",
    "en"
  ],
  "defaultLanguage": "pl",
  "assets": [
    {
      "id": "meadow",
      "kind": "image",
      "src": {
        "default": "images/meadow.png"
      }
    },
    {
      "id": "basket",
      "kind": "image",
      "src": {
        "default": "images/basket.png"
      }
    },
    {
      "id": "apple",
      "kind": "image",
      "src": {
        "default": "images/apple.png"
      }
    },
    {
      "id": "banana",
      "kind": "image",
      "src": {
        "default": "images/banana.png"
      }
    },
    {
      "id": "car",
      "kind": "image",
      "src": {
        "default": "images/car.png"
      }
    },
    {
      "id": "duck",
      "kind": "image",
      "src": {
        "default": "images/duck.png"
      }
    },
    {
      "id": "cherries",
      "kind": "image",
      "src": {
        "default": "images/cherries.png"
      }
    },
    {
      "id": "sun",
      "kind": "image",
      "src": {
        "default": "images/sun.png"
      }
    },
    {
      "id": "correct",
      "kind": "audio",
      "src": {
        "default": "sounds/correct.wav"
      }
    },
    {
      "id": "wrong",
      "kind": "audio",
      "src": {
        "default": "sounds/wrong.wav"
      }
    },
    {
      "id": "pick-up",
      "kind": "audio",
      "src": {
        "default": "sounds/pick-up.wav"
      }
    },
    {
      "id": "drop",
      "kind": "audio",
      "src": {
        "default": "sounds/drop.wav"
      }
    },
    {
      "id": "win",
      "kind": "audio",
      "src": {
        "default": "sounds/win.wav"
      }
    }
  ],
  "elements": [
    {
      "id": "background",
      "type": "image",
      "rect": [
        0,
        0,
        1200,
        675
      ],
      "layer": 0,
      "visual": {
        "type": "image",
        "asset": "meadow"
      }
    },
    {
      "id": "instruction",
      "type": "text",
      "rect": [
        72,
        24,
        1056,
        60
      ],
      "layer": 5,
      "visual": {
        "type": "text",
        "text": {
          "pl": "Rozłóż do koszyków: <b>czerwone</b> i <b>żółte</b>. Zły wybór możesz poprawić.",
          "en": "Sort into the baskets: <b>red</b> and <b>yellow</b>. You can fix a wrong choice."
        },
        "size": 28,
        "color": "#5a3a22",
        "align": "center"
      }
    },
    {
      "id": "label-red",
      "type": "text",
      "rect": [
        175,
        110,
        300,
        50
      ],
      "layer": 2,
      "visual": {
        "type": "text",
        "text": {
          "pl": "<b>Czerwone</b>",
          "en": "<b>Red</b>"
        },
        "size": 34,
        "color": "#d23c3c",
        "align": "center"
      }
    },
    {
      "id": "label-yellow",
      "type": "text",
      "rect": [
        725,
        110,
        300,
        50
      ],
      "layer": 2,
      "visual": {
        "type": "text",
        "text": {
          "pl": "<b>Żółte</b>",
          "en": "<b>Yellow</b>"
        },
        "size": 34,
        "color": "#c98a00",
        "align": "center"
      }
    },
    {
      "id": "basket-red",
      "type": "target",
      "rect": [
        175,
        170,
        300,
        270
      ],
      "layer": 1,
      "visual": {
        "type": "image",
        "asset": "basket"
      },
      "capacity": "many",
      "snap": {
        "mode": "none"
      },
      "on": {
        "correct": [
          {
            "do": "set-state",
            "target": "dropped",
            "state": "good"
          },
          {
            "do": "play-sound",
            "asset": "correct"
          },
          {
            "do": "emit-particles",
            "target": "dropped"
          }
        ],
        "wrong": [
          {
            "do": "set-state",
            "target": "dropped",
            "state": "bad"
          },
          {
            "do": "play-sound",
            "asset": "wrong"
          }
        ]
      }
    },
    {
      "id": "basket-yellow",
      "type": "target",
      "rect": [
        725,
        170,
        300,
        270
      ],
      "layer": 1,
      "visual": {
        "type": "image",
        "asset": "basket"
      },
      "capacity": "many",
      "snap": {
        "mode": "none"
      },
      "on": {
        "correct": [
          {
            "do": "set-state",
            "target": "dropped",
            "state": "good"
          },
          {
            "do": "play-sound",
            "asset": "correct"
          },
          {
            "do": "emit-particles",
            "target": "dropped"
          }
        ],
        "wrong": [
          {
            "do": "set-state",
            "target": "dropped",
            "state": "bad"
          },
          {
            "do": "play-sound",
            "asset": "wrong"
          }
        ]
      }
    },
    {
      "id": "apple",
      "type": "component",
      "rect": [
        155,
        530,
        90,
        90
      ],
      "layer": 3,
      "visual": {
        "type": "image",
        "asset": "apple",
        "states": {
          "good": {
            "scale": 1.12
          },
          "bad": {
            "tint": "#ff8c8c",
            "opacity": 0.75
          }
        }
      },
      "draggable": {
        "bounds": "scene",
        "hit": "pixels"
      },
      "on": {
        "drag-start": [
          {
            "do": "set-state",
            "target": "self",
            "state": "normal"
          },
          {
            "do": "play-sound",
            "asset": "pick-up"
          }
        ],
        "drop-outside": [
          {
            "do": "play-sound",
            "asset": "drop"
          }
        ]
      }
    },
    {
      "id": "banana",
      "type": "component",
      "rect": [
        315,
        530,
        90,
        90
      ],
      "layer": 3,
      "visual": {
        "type": "image",
        "asset": "banana",
        "states": {
          "good": {
            "scale": 1.12
          },
          "bad": {
            "tint": "#ff8c8c",
            "opacity": 0.75
          }
        }
      },
      "draggable": {
        "bounds": "scene",
        "hit": "pixels"
      },
      "on": {
        "drag-start": [
          {
            "do": "set-state",
            "target": "self",
            "state": "normal"
          },
          {
            "do": "play-sound",
            "asset": "pick-up"
          }
        ],
        "drop-outside": [
          {
            "do": "play-sound",
            "asset": "drop"
          }
        ]
      }
    },
    {
      "id": "car",
      "type": "component",
      "rect": [
        475,
        537,
        90,
        77
      ],
      "layer": 3,
      "visual": {
        "type": "image",
        "asset": "car",
        "states": {
          "good": {
            "scale": 1.12
          },
          "bad": {
            "tint": "#ff8c8c",
            "opacity": 0.75
          }
        }
      },
      "draggable": {
        "bounds": "scene",
        "hit": "pixels"
      },
      "on": {
        "drag-start": [
          {
            "do": "set-state",
            "target": "self",
            "state": "normal"
          },
          {
            "do": "play-sound",
            "asset": "pick-up"
          }
        ],
        "drop-outside": [
          {
            "do": "play-sound",
            "asset": "drop"
          }
        ]
      }
    },
    {
      "id": "duck",
      "type": "component",
      "rect": [
        635,
        530,
        90,
        90
      ],
      "layer": 3,
      "visual": {
        "type": "image",
        "asset": "duck",
        "states": {
          "good": {
            "scale": 1.12
          },
          "bad": {
            "tint": "#ff8c8c",
            "opacity": 0.75
          }
        }
      },
      "draggable": {
        "bounds": "scene",
        "hit": "pixels"
      },
      "on": {
        "drag-start": [
          {
            "do": "set-state",
            "target": "self",
            "state": "normal"
          },
          {
            "do": "play-sound",
            "asset": "pick-up"
          }
        ],
        "drop-outside": [
          {
            "do": "play-sound",
            "asset": "drop"
          }
        ]
      }
    },
    {
      "id": "cherries",
      "type": "component",
      "rect": [
        795,
        530,
        90,
        90
      ],
      "layer": 3,
      "visual": {
        "type": "image",
        "asset": "cherries",
        "states": {
          "good": {
            "scale": 1.12
          },
          "bad": {
            "tint": "#ff8c8c",
            "opacity": 0.75
          }
        }
      },
      "draggable": {
        "bounds": "scene",
        "hit": "pixels"
      },
      "on": {
        "drag-start": [
          {
            "do": "set-state",
            "target": "self",
            "state": "normal"
          },
          {
            "do": "play-sound",
            "asset": "pick-up"
          }
        ],
        "drop-outside": [
          {
            "do": "play-sound",
            "asset": "drop"
          }
        ]
      }
    },
    {
      "id": "sun",
      "type": "component",
      "rect": [
        955,
        530,
        90,
        90
      ],
      "layer": 3,
      "visual": {
        "type": "image",
        "asset": "sun",
        "states": {
          "good": {
            "scale": 1.12
          },
          "bad": {
            "tint": "#ff8c8c",
            "opacity": 0.75
          }
        }
      },
      "draggable": {
        "bounds": "scene",
        "hit": "pixels"
      },
      "on": {
        "drag-start": [
          {
            "do": "set-state",
            "target": "self",
            "state": "normal"
          },
          {
            "do": "play-sound",
            "asset": "pick-up"
          }
        ],
        "drop-outside": [
          {
            "do": "play-sound",
            "asset": "drop"
          }
        ]
      }
    }
  ],
  "rule": {
    "kind": "place",
    "pairs": [
      {
        "components": [
          "apple",
          "car",
          "cherries"
        ],
        "targets": [
          "basket-red"
        ]
      },
      {
        "components": [
          "banana",
          "duck",
          "sun"
        ],
        "targets": [
          "basket-yellow"
        ]
      }
    ]
  },
  "on": {
    "completed": [
      {
        "do": "play-sound",
        "asset": "win"
      }
    ]
  }
}