Game Scenario Data

Game scenario

Game content is located in two places: src/data/data.js and src/assets/ folder with src/assets/index.js exporting for use in components.

src/data/data.js

The game scenario is all contained inside a data structure that resides in data/data.js file.

Example beginning data.js

export default {
  places: [
    {
      id: 0,
      text: "Playground",
      icon: "/img/places_icons/Playground_icon.svg",
      requiredStars: 0,
      image: "/places_backgrounds/Playground.png",
      width: "200px",
      coordinates: [42, 70],
      interactions: [
        {
          id: 1,
          text: "Kids on the swing",
          question: [
            "Can you tell what Leonie and Reuben are feeling?",
            "Select all the matching words"
          ],
          image: "/img/interactions/Slide_happy",
          coordinates: [20, 66],
          width: "225px",
          requiredStars: 0,
          answers: [
            {
              id: 2,
              text: "Happy",
              correct: true,
              response: "Correct! They look like they are happy"
            },
            {
              id: 3,
              text: "Sad",
              correct: false,
              response: "Look again! Do they look like they are sad?"
            }
          ],
          hints: [
            {
              id: 10,
              text: "Look at their faces, are they smiling?",
              answers: [2]
            },
          ]
        }...

Every element that has an id, needs a number that is unique throughout the whole data object.

It is an object{} with places as an array[] of place objects{}.

Each place object has:

• id: 0 --
• text: "Playground" // name of the place
• icon: "/img/places_icons/Playground_icon.svg" // file that has an icon for the place on the map
• requiredStars: 0, // how many interactions completed are needed to unlock that place
• image: "/places_backgrounds/Playground.png", // image that is displayed as a background for list of interactions
• width: "200px", // width of the icon
• coordinates: [42, 70], // percentage from the right, percentage from top on the screen
• interactions:[] // list of insteractions in that place

Each intaractions is an object{} with following properties:

• id: 1,
• text: "Kids on the swing",
• question: [ "Can you tell what Leonie and Reuben are feeling?", "Select all the matching words" ],
• image: "/img/interactions/Slide_happy", // icon for the interaction will be with .svg extention and .png for interaction screen
• coordinates: [20, 66], // percentage from the right, percentage from top on the screen
• width: "225px", // width of the icon
• requiredStars: 0, // how many interactions withing the place that interaction needs to unlocked
• answers: [] // list of answer objects
• hints: [] // list of hints objects

Each answer has properties:

• id: 2
• text: "Happy", // text displayed on the button
• correct: true, // is this a correct answer?
• response: "Correct! They look like they are happy" // what to display when pressed

Each hint has properties:

• id: 10
• text: "Look at their faces, are they smiling?", // text displayed as a hint
• answers: [2, 3] // this hint refers to answers with ids 2 and 3 , one of them is correct

Assets file in src/assets/index.js

To make sure all assets are cached by the service worker in our PWA, all dynamic assets (interactions, places, etc) have to be included in this file and added to assets object. Any file that uses any images imports the assets and then use the imported object as a directory with relative path as a key.

import background1 from "./img/interactions_backgrounds/Playground.svg";
import background2 from "./img/interactions_backgrounds/School.svg";
import background3 from "./img/interactions_backgrounds/Airport.svg";

import image1 from "./img/interactions/Blackboard.png";
import image2 from "./img/interactions/Boys_ball.png";
import image3 from "./img/interactions/Bullying.png";

import place1 from "./img/places_icons/Playground_icon.svg";
import place2 from "./img/places_icons/School_icon.svg";
import place3 from "./img/places_icons/Airport_icon.svg";

import icon1 from "./img/interactions/Slide_happy.svg";
import icon2 from "./img/interactions/Blackboard.svg";
import icon3 from "./img/interactions/Boys_ball.svg";


const assets = {
    //InteractionCircle icons shown on a PlacePage
    "/img/interactions/Slide_happy.svg": icon1,
    "/img/interactions/Blackboard.svg": icon2,
    //...

    //Places Background icons shown on PlacePage
    "/img/places_icons/Playground_icon.svg": place1,
    "/img/places_icons/School_icon.svg": place2,
    "/img/places_icons/Airport_icon.svg": place3,

    //Interactions pictures shown on InteractionPage
    "/img/interactions/Blackboard.png": image1,
    "/img/interactions/Boys_ball.png": image2,
    "/img/interactions/Bullying.png": image3,
    
    //Places backrounds for interactions
    Playground: background1,
    School: background2,
    Airport: background3
};
export default assets;