Coding Escape Game


#1

Im trying to code an escape game. So the students need to click on 4 buttons right after each other to get into a new Scene. This code unfortunately doesnt work. I would appreciate some help.

gruen = Scene.getItem("gruen");
    gruen.onActivate(function () {
        gruen.setProperty("scene1", 1)
        Space.log(gruen.getProperty("scene1"));
    });

    rotR = Scene.getItem("rotR");
    rotR.onActivate(function () {
        rotR.setProperty("scene1", 1)
        Space.log(rotR.getProperty("scene1"));

    });

    gelbE = Scene.getItem("gelbE");
    gelbE.onActivate(function () {
        gelbE.setProperty("scene1", 1)
        Space.log(gelbE.getProperty("scene1"));
    });

    gruenT = Scene.getItem("gruenT");
    gruenT.onActivate(function () {
        gruenT.setProperty("scene1", 1)
        Space.log(gruenT.getProperty("scene1"));
        Space.log(gruen.getProperty("scene1"));
    });

    if (Number(gruen.getProperty("scene1")) == 1 && Number(rotR.getProperty("scene1")) == 1 && Number(gelbE.getProperty("scene1")) == 1 && Number(gruenT.getProperty("scene1")) == 1) {
        Space.goTo("xmwmijahhaCIWNBnvZE3Gn");
        Space.log("Nächste Szene.")

    };

#2

Can you provide a link to your CoSpace? This may help provide more context and I would be happy to try and help or get you in touch with someone who can. Thanks!

Adam Samuels
CoSpaces Ninja Ambassador


#3


This is my space.
Im also not sure about the use of “var”.

and the full code:

Space.showSceneNavigation(false);

var leaveOne = Scene.getItem("TxU7vVzfoM");
var baum = Scene.getItem("DbKaD6EJUS");

function ToggleItem(item, animState1, animState2) {
   this.state = 2;
   this.bindLogic(item, animState1, animState2);
}

ToggleItem.prototype.bindLogic = function (item, animState1, animState2) {
   var item = item;
   var self = this;
   if (this.item !== null) {
       //Does a animation name check on activate of the object.
       //If the current animation equals animState1, play animState2. Else, play animState 1
       item.onActivate(function () {
           if (self.state == 1) {
               item.playIdleAnimation(animState1);
               self.state = 2;
           } else {
               item.playIdleAnimation(animState2);
               self.state = 1;
           }
       })
   }
}
var schmetterling = Scene.getItem("Schmetterling 1");
new ToggleItem(schmetterling, "Fly", "None");



baum.onActivate(function () {

   var text1 = Scene.getItem("Text1");
   var text2 = Scene.getItem("Text2");
   var text3 = Scene.getItem("Text3");
   var text4 = Scene.getItem("Text4");
   var text5 = Scene.getItem("Text");

   text1.setText("1. Wie bezeichnet man einen Baum als ganzes Lebewesen? <rot> Organisation, <grün> Organismus, <gelb> Organ, <blau> Organell");
   text2.setText("2. Wozu dienen die Blätter eines Baumes? <rot> In ihnen findet Fotosynthese statt. <grün> In ihnen wird mithilfe von Sonnenlicht Zucker produziert. <gelb> Sie dienen der Verdunstung von Wasser. <blau> Sie dienen der Kommunikation mit anderen Bäumen.");
   text3.setText("3. Wie viele Blätter hat eine ausgewachsene Buche in einem Wald ungefähr? <rot> 260, <grün> 2.600, <gelb> 26.000, <blau> 260.000");
   text4.setText("4. Was ist merkwürdig an dem Baum, der im Garten des Hauses steht? <rot> Der Baum hat nur zwei grüne Blätter. <grün> Der Baum hat zwei völlig verschieden gestaltete Blätter. <gelb> Der Baum steht in einem Garten. <blau> Der Baum ist fast so groß wie das Haus.");
   text5.setText("Super. Du hast den richtigen Baum gefunden. Komm wieder rein. Lies dir die Aufgaben an den Seiten durch und tippe die vier Button in der richtigen Reihenfolge, dann wirst du in die nächste Szene gelangen.");

   var rot = Scene.getItem("rot");
   rot.onActivate(function () { });

   var gelb = Scene.getItem("gelb");
   gelb.onActivate(function () { });

   var blau = Scene.getItem("blau");
   blau.onActivate(function () { });

   var gruenR = Scene.getItem("gruenR");
   gruenR.onActivate(function () { });

   var gelbR = Scene.getItem("gelbR");
   gelbR.onActivate(function () { });

   var blauR = Scene.getItem("blauR");
   blauR.onActivate(function () { });

   var rotE = Scene.getItem("rotE");
   rotE.onActivate(function () { });

   var gruenE = Scene.getItem("gruenE");
   gruenE.onActivate(function () { });

   var blauE = Scene.getItem("blauE");
   blauE.onActivate(function () { });

   var rotT = Scene.getItem("rotT");
   rotT.onActivate(function () { });

   var gelbT = Scene.getItem("gelbT");
   gelbT.onActivate(function () { });

   var blauT = Scene.getItem("blauT");
   blauT.onActivate(function () { });


   gruen = Scene.getItem("gruen");
   gruen.onActivate(function () {
       gruen.setProperty("scene1", 1)
       Space.log(gruen.getProperty("scene1"));
   });

   rotR = Scene.getItem("rotR");
   rotR.onActivate(function () {
       rotR.setProperty("scene1", 1)
       Space.log(rotR.getProperty("scene1"));

   });

   gelbE = Scene.getItem("gelbE");
   gelbE.onActivate(function () {
       gelbE.setProperty("scene1", 1)
       Space.log(gelbE.getProperty("scene1"));
   });

   gruenT = Scene.getItem("gruenT");
   gruenT.onActivate(function () {
       gruenT.setProperty("scene1", 1)
       Space.log(gruenT.getProperty("scene1"));
       Space.log(gruen.getProperty("scene1"));
   });

   if (Number(gruen.getProperty("scene1")) == 1 && Number(rotR.getProperty("scene1")) == 1 && Number(gelbE.getProperty("scene1")) == 1 && Number(gruenT.getProperty("scene1")) == 1) {
       Space.goTo("xmwmijahhaCIWNBnvZE3Gn");
       Space.log("Nächste Szene.")

   };



   Scene.onButtonDown(function () {
       Scene.onButtonDown(function () {
           Scene.onButtonDown(function () {
               Scene.onButtonDown(function () {
                   Space.goTo("xmwmijahhaCIWNBnvZE3Gn");
               }, 'b')
           }, 'c')
       }, 'a')
   }, 'b');
});



var tür = Scene.getItem('Tür');
var istOffen = false;
tür.onActivate(function () {
   if (!istOffen) {
       tür.playIdleAnimation('Open');
       istOffen = true;
   } else {
       tür.playIdleAnimation('Closed');
       istOffen = false;
   }
});

#4

Hi Sinahpe,

that’s an awesome space you made there! Your question / answer quiz - code is using a lot of manual work, so I wrote a small helper class for you. Here is the code:

Space.showSceneNavigation(false);

//Here we define a class with which we can control the Question boards
class QuestionBoard {
    //The question board has following properties
    boardItem: GameItem;
    textItem: TextItem;
    buttonRed: GameItem;
    buttonGreen: GameItem;
    buttonBlue: GameItem;
    buttonYellow: GameItem;
    buttons: GameItem[] = [];
    questionText: string;
    correctButton: string;

    //The constructor starts the logic of the question board and applies values to the class properties
    constructor(boardItemName: string, textItemName: string, buttonRedName: string, buttonGreenName: string, buttonBlueName: string, buttonYellowName: string) {
        this.boardItem = Scene.getItem(boardItemName) as GameItem;
        this.textItem = Scene.getItem(textItemName) as TextItem;
        this.buttonRed = Scene.getItem(buttonRedName) as GameItem;
        this.buttonGreen = Scene.getItem(buttonGreenName) as GameItem;
        this.buttonBlue = Scene.getItem(buttonBlueName) as GameItem;
        this.buttonYellow = Scene.getItem(buttonYellowName) as GameItem;
        this.buttons = [this.buttonBlue, this.buttonYellow, this.buttonGreen, this.buttonRed];
        this.setButtonInteractions()
    }

    //With this method you pose a question
    setQuestion(frage: string) {
        this.questionText = frage;
        this.textItem.setText(this.questionText);
    }

    //With this method you set one of the buttons to be the correct one
    setAnswer(answerButton: string) {
        this.correctButton = answerButton;
    }

    //This creates click-interactions for the buttons
    setButtonInteractions() {
        this.buttons.forEach((button: GameItem) => {
            button.onActivate(() => {
                this.checkAnswer(button.name())
            });
        });
    }

    //This removes click-interactions for the buttons
    removeButtonInteractions() {
        this.buttons.forEach((button: GameItem) => {
            button.onActivate(null)
        });
    }

    //Checks if the correct button was pressed
    checkAnswer(buttonName: string) {
        if (buttonName == this.correctButton) {
            //Increases the score via the "increaseScore"-function
            increaseScore();
            this.removeButtonInteractions();
            this.textItem.setText("Richtige Antwort!");
        } else {
            this.removeButtonInteractions();
            this.textItem.setText("Falsche Antwort!");

            //Waits for 3 seconds before asking question again
            Scene.schedule(() => {
                this.setButtonInteractions();
                this.textItem.setText(this.questionText)
            }, 3);
        }
    }
}

//This function increases the score. At score 4 we switch to another scene
let score = 0;
function increaseScore() {
    score++
    if (score >= 4) {
        (Scene.getItem("Camera") as GameItem).showInfoPanel("Done!", "someImageID", "Continue to the next scene!", false, function () {
            Space.goTo("yourSceneIDHere");
        });
    }
}

//Sets a single event for opening the door.
let door = Scene.getItem("Tür") as GameItem;
door.onActivate(function () {
    door.playIdleAnimation("Open");

    //You remove the event if you pass "null" into the onActivate method 
    door.onActivate(null)
});

//When the correct tree is looked at, we activate the question boards 
let tree = Scene.getItem("Baum") as GameItem;
tree.onHover((isHovered: boolean) => {
    if (isHovered) {
        askQuestions();

        //You remove the event if you pass "null" into the onHover method 
        tree.onHover(null)
    }
});

function askQuestions() {
    let text5 = Scene.getItem("Text5") as TextItem;
    text5.setText("Super. Du hast den richtigen Baum gefunden. Komm wieder rein. Lies dir die Aufgaben an den Seiten durch und tippe die vier Button in der richtigen Reihenfolge, dann wirst du in die nächste Szene gelangen.")

    //We create the questionboards via the Class defined above
    let questionBoard1 = new QuestionBoard("Tafel1", "Text1", "rot", "gruen", "gelb", "blau");
    let questionBoard2 = new QuestionBoard("Tafel2", "Text2", "rotR", "gruenR", "gelbR", "blauR");
    let questionBoard3 = new QuestionBoard("Tafel3", "Text3", "rotE", "gruenE", "gelbE", "blauE");
    let questionBoard4 = new QuestionBoard("Tafel4", "Text4", "rotT", "gruenT", "gelbT", "blauT");

    //With "\n" you create a line break in a string
    questionBoard1.setQuestion("1. Wie bezeichnet man einen Baum als ganzes Lebewesen? \n<rot> Organisation, \n<grün> Organismus, \n<gelb> Organ, \n<blau> Organell");
    questionBoard2.setQuestion("2. Wozu dienen die Blätter eines Baumes? \n<rot> In ihnen findet Fotosynthese statt. \n<grün> In ihnen wird mithilfe von Sonnenlicht Zucker produziert. \n<gelb> Sie dienen der Verdunstung von Wasser. \n<blau> Sie dienen der Kommunikation mit anderen Bäumen.");
    questionBoard3.setQuestion("3. Wie viele Blätter hat eine ausgewachsene Buche in einem Wald ungefähr? \n<rot> 260, \n<grün> 2.600, \n<gelb> 26.000, \n<blau> 260.000");
    questionBoard4.setQuestion("4. Was ist merkwürdig an dem Baum, der im Garten des Hauses steht? \n<rot> Der Baum hat nur zwei grüne Blätter. \n<grün> Der Baum hat zwei völlig verschieden gestaltete Blätter. \n<gelb> Der Baum steht in einem Garten. \n<blau> Der Baum ist fast so groß wie das Haus.");

    questionBoard1.setAnswer("gruen");
    questionBoard2.setAnswer("rotR");
    questionBoard3.setAnswer("gelbE");
    questionBoard4.setAnswer("gruenT");
}

Example in action

How it works:
We’re creating a QuestionBoard class and assign buttons, text billboards and the text items to it. The QuestionBoard class has methods with which you can set questions and the correct answers based on the four buttons.

Once the student / player goes out of the house and looks at the correct tree, we activate the four QuestionBoard classes. Every correct answer will increase the score. At a score of 4 or above we switch to another scene.

Feel free to ask questions specific to this code if anything is unclear. Below is the same code with German documentation to make this easier to understand.

German translated code
Space.showSceneNavigation(false);

//Wir definieren eine Klasse mit der man die Fragetafeln steuern kann
class FrageTafel {
    //Die FrageTafel hat die folgenden Gegenstände und Eigenschaften
    tafelItem: GameItem;
    textItem: TextItem;
    knopfRot: GameItem;
    knopfGrün: GameItem;
    knopfBlau: GameItem;
    knopfGelb: GameItem;
    knöpfe: GameItem[] = [];
    frageText: string;
    richtigerKnopf: string;

    //Der Constructor started die Logik der Fragetafel und weist den Eigenschaften ihre Items & Werte hinzu
    constructor(tafelItemName: string, textItemName: string, knopfRotName: string, knopfGrünName: string, knopfBlauName: string, knopfGelbName: string) {
        this.tafelItem = Scene.getItem(tafelItemName) as GameItem;
        this.textItem = Scene.getItem(textItemName) as TextItem;
        this.knopfRot = Scene.getItem(knopfRotName) as GameItem;
        this.knopfGrün = Scene.getItem(knopfGrünName) as GameItem;
        this.knopfBlau = Scene.getItem(knopfBlauName) as GameItem;
        this.knopfGelb = Scene.getItem(knopfGelbName) as GameItem;
        this.knöpfe = [this.knopfBlau, this.knopfGelb, this.knopfGrün, this.knopfRot];
        this.setzeKnopfInteraktionen()
    }

    //Mit dieser Methode stellt man eine Frage
    setzeFrage(frage: string) {
        this.frageText = frage;
        this.textItem.setText(this.frageText);
    }

    //Mit dieser Methode setzt man einen Knopf-Namen als richtige Antwort
    setzeAntwort(antwortKnopf: string) {
        this.richtigerKnopf = antwortKnopf;
    }

    //Die Klick-Interaktionen aller Knöpfe wird gesetzt
    setzeKnopfInteraktionen() {
        this.knöpfe.forEach((knopf: GameItem) => {
            knopf.onActivate(() => {
                this.überprüfeAntwort(knopf.name())
            });
        });
    }

    //Die Klick-Interaktionen aller Knöpfe wird entfernt
    entferneKnopfInteraktionen() {
        this.knöpfe.forEach((knopf: GameItem) => {
            knopf.onActivate(null)
        });
    }

    //Überprüft ob der richtige Knopf angeklickt ist
    überprüfeAntwort(knopfName: string) {
        if (knopfName == this.richtigerKnopf) {
            //Erhöht den punktestand mit der "erhöhePunktestand"-Funktion
            erhöhePunktestand();
            this.entferneKnopfInteraktionen();
            this.textItem.setText("Richtige Antwort!");
        } else {
            this.entferneKnopfInteraktionen();
            this.textItem.setText("Falsche Antwort!");

            //Wartet für 3 Sekunden bevor die Frage wieder gestellt wird
            Scene.schedule(() => {
                this.setzeKnopfInteraktionen();
                this.textItem.setText(this.frageText)
            }, 3);
        }
    }
}

//Diese Funktion erhöht den punktestand. Wenn 4 erreicht wird, wird ein InfoPanel dargestellt und dann zu einer anderen Szene gewechselt.
let punktestand = 0;
function erhöhePunktestand() {
    punktestand++
    if (punktestand >= 4) {
        (Scene.getItem("Camera") as GameItem).showInfoPanel("Geschafft!", "someImageID", "Weiter zur nächsten Szene!", false, function () {
            Space.goTo("yourSceneIDHere");
        });
    }
}

//Setzt ein Ereignis zum einmaligen Öffnen der Tür.
let tür = Scene.getItem("Tür") as GameItem;
tür.onActivate(function () {
    tür.playIdleAnimation("Open");

    //Wenn man "null" in der onActivate Methode übergibt, wird das Activate-Ereignis vom Item entfernt 
    tür.onActivate(null)
});

//Sobald der Baum angesehen wird, werden die Tafeln aktiviert
let baum = Scene.getItem("Baum") as GameItem;
baum.onHover((isHovered: boolean) => {
    if (isHovered) {
        stelleFragen();

        //Wenn man "null" in der onHover Methode übergibt, wird das Hover-Ereignis vom Item entfernt 
        baum.onHover(null)
    }
});

function stelleFragen() {
    let text5 = Scene.getItem("Text5") as TextItem;
    text5.setText("Super. Du hast den richtigen Baum gefunden. Komm wieder rein. Lies dir die Aufgaben an den Seiten durch und tippe die vier Button in der richtigen Reihenfolge, dann wirst du in die nächste Szene gelangen.")

    //Hier stellen wir neue Fragetafeln für die Szene her. Für den Klassen - Constructor übergeben wir die Namen oder IDs der Items.
    let frageTafel1 = new FrageTafel("Tafel1", "Text1", "rot", "gruen", "gelb", "blau");
    let frageTafel2 = new FrageTafel("Tafel2", "Text2", "rotR", "gruenR", "gelbR", "blauR");
    let frageTafel3 = new FrageTafel("Tafel3", "Text3", "rotE", "gruenE", "gelbE", "blauE");
    let frageTafel4 = new FrageTafel("Tafel4", "Text4", "rotT", "gruenT", "gelbT", "blauT");

    //Mit "\n" erstellt man einen Zeilenumbruch im String
    frageTafel1.setzeFrage("1. Wie bezeichnet man einen Baum als ganzes Lebewesen? \n<rot> Organisation, \n<grün> Organismus, \n<gelb> Organ, \n<blau> Organell");
    frageTafel2.setzeFrage("2. Wozu dienen die Blätter eines Baumes? \n<rot> In ihnen findet Fotosynthese statt. \n<grün> In ihnen wird mithilfe von Sonnenlicht Zucker produziert. \n<gelb> Sie dienen der Verdunstung von Wasser. \n<blau> Sie dienen der Kommunikation mit anderen Bäumen.");
    frageTafel3.setzeFrage("3. Wie viele Blätter hat eine ausgewachsene Buche in einem Wald ungefähr? \n<rot> 260, \n<grün> 2.600, \n<gelb> 26.000, \n<blau> 260.000");
    frageTafel4.setzeFrage("4. Was ist merkwürdig an dem Baum, der im Garten des Hauses steht? \n<rot> Der Baum hat nur zwei grüne Blätter. \n<grün> Der Baum hat zwei völlig verschieden gestaltete Blätter. \n<gelb> Der Baum steht in einem Garten. \n<blau> Der Baum ist fast so groß wie das Haus.");

    frageTafel1.setzeAntwort("gruen");
    frageTafel2.setzeAntwort("rotR");
    frageTafel3.setzeAntwort("gelbE");
    frageTafel4.setzeAntwort("gruenT");
}

IMPORTANT: make sure that you re-name your Tafel - items and Text items correctly (watch for text spacing and spelling). Make sure that there are no two items with the same name (e.g. two items with name “Baum” or two items with name “Text1”, etc).

Hope this helps! Looking forward to your Micro-cosmos space!


#5

Thanks so much. That helps a lot. It works perfectly fine.
Ive got some questions about the code:
Why do you use var/let or nothing at all?
Why do you have to declare the properties in the constructor again as GameItem or TextItem? And what is it about TextItem and GameItem?

Would you mind sending the code in Javascript as well?

Thanks again!


#6

Hi Sinahpe,

the code written above is Typescript. Typescript adds static typing to JavaScript. In this example that means: you can define properties / variables as “GameItem”, “TextItem” or “string” which will make the coding editor suggest you suitable methods for that variable. The code editor then also knows how to treat the variable and will highlight possible errors for you).

About your questions

1.The let statement declares a scope local variable. It helps you to avoid problems that come from block scoping rules that var could create. Please see the example below for details.

let vs var example
//var example
function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    Space.log(x);  // 2
  }
  Space.log(x);  // 2
}

//let example
function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    Space.log(x);  // 2
  }
  Space.log(x);  // 1
}

For more information about var, let and scoping rules, visit this example from the MDN web docs.

2.The method Scene.getItem() returns an item of type “SceneItem”. By adding as GameItem or as TextItem I let the code editor know that I want to treat this item as a GameItem or TextItem respectively.

3.TextItem or GameItem are items that have different kind of methods which we can call on them. TextItems have methods specific to text modification (e.g. .setText() only exists on TextItems, not on GameItem). Feel free to try it out yourself with the example below!

Typescript code example

Code:

let text = Scene.getItem("myTextItem") as TextItem;

text.setText("Hi!");`

Behaviour in code editor:
TextCodeHighlight

4.Below you can find the JavaScript version. Note that the only difference is the static typing not present here.

JavaScript code
Space.showSceneNavigation(false);

//Here we define a class with which we can control the Question boards
class QuestionBoard {
    //The question board has following properties
    boardItem;
    textItem;
    buttonRed;
    buttonGreen;
    buttonBlue;
    buttonYellow;
    buttons = [];
    questionText;
    correctButton;

    //The constructor starts the logic of the question board and applies values to the class properties
    constructor(boardItemName, textItemName, buttonRedName, buttonGreenName, buttonBlueName, buttonYellowName) {
        this.boardItem = Scene.getItem(boardItemName) as GameItem;
        this.textItem = Scene.getItem(textItemName) as TextItem;
        this.buttonRed = Scene.getItem(buttonRedName) as GameItem;
        this.buttonGreen = Scene.getItem(buttonGreenName) as GameItem;
        this.buttonBlue = Scene.getItem(buttonBlueName) as GameItem;
        this.buttonYellow = Scene.getItem(buttonYellowName) as GameItem;
        this.buttons = [this.buttonBlue, this.buttonYellow, this.buttonGreen, this.buttonRed];
        this.setButtonInteractions()
    }

    //With this method you pose a question
    setQuestion(frage) {
        this.questionText = frage;
        this.textItem.setText(this.questionText);
    }

    //With this method you set one of the buttons to be the correct one
    setAnswer(answerButton) {
        this.correctButton = answerButton;
    }

    //This creates click-interactions for the buttons
    setButtonInteractions() {
        this.buttons.forEach((button) => {
            button.onActivate(() => {
                this.checkAnswer(button.name())
            });
        });
    }

    //This removes click-interactions for the buttons
    removeButtonInteractions() {
        this.buttons.forEach((button) => {
            button.onActivate(null)
        });
    }

    //Checks if the correct button was pressed
    checkAnswer(buttonName) {
        if (buttonName == this.correctButton) {
            //Increases the score via the "increaseScore"-function
            increaseScore();
            this.removeButtonInteractions();
            this.textItem.setText("Richtige Antwort!");
        } else {
            this.removeButtonInteractions();
            this.textItem.setText("Falsche Antwort!");

            //Waits for 3 seconds before asking question again
            Scene.schedule(() => {
                this.setButtonInteractions();
                this.textItem.setText(this.questionText)
            }, 3);
        }
    }
}

//This function increases the score. At score 4 we switch to another scene
let score = 0;
function increaseScore() {
    score++
    if (score >= 4) {
        (Scene.getItem("Camera") as GameItem).showInfoPanel("Done!", "someImageID", "Continue to the next scene!", false, function () {
            Space.goTo("yourSceneIDHere");
        });
    }
}

//Sets a single event for opening the door.
let door = Scene.getItem("Tür") as TextItem;
door.onActivate(function () {
    door.playIdleAnimation("Open");

    //You remove the event if you pass "null" into the onActivate method 
    door.onActivate(null)
});

//When the correct tree is looked at, we activate the question boards 
let tree = Scene.getItem("Baum") as GameItem;
tree.onHover((isHovered) => {
    if (isHovered) {
        askQuestions();

        //You remove the event if you pass "null" into the onHover method 
        tree.onHover(null)
    }
});

function askQuestions() {
    let text5 = Scene.getItem("Text5") as TextItem;
    text5.setText("Super. Du hast den richtigen Baum gefunden. Komm wieder rein. Lies dir die Aufgaben an den Seiten durch und tippe die vier Button in der richtigen Reihenfolge, dann wirst du in die nächste Szene gelangen.")

    //We create the questionboards via the Class defined above
    let questionBoard1 = new QuestionBoard("Tafel1", "Text1", "rot", "gruen", "gelb", "blau");
    let questionBoard2 = new QuestionBoard("Tafel2", "Text2", "rotR", "gruenR", "gelbR", "blauR");
    let questionBoard3 = new QuestionBoard("Tafel3", "Text3", "rotE", "gruenE", "gelbE", "blauE");
    let questionBoard4 = new QuestionBoard("Tafel4", "Text4", "rotT", "gruenT", "gelbT", "blauT");

    //With "\n" you create a line break in a string
    questionBoard1.setQuestion("1. Wie bezeichnet man einen Baum als ganzes Lebewesen? \n<rot> Organisation, \n<grün> Organismus, \n<gelb> Organ, \n<blau> Organell");
    questionBoard2.setQuestion("2. Wozu dienen die Blätter eines Baumes? \n<rot> In ihnen findet Fotosynthese statt. \n<grün> In ihnen wird mithilfe von Sonnenlicht Zucker produziert. \n<gelb> Sie dienen der Verdunstung von Wasser. \n<blau> Sie dienen der Kommunikation mit anderen Bäumen.");
    questionBoard3.setQuestion("3. Wie viele Blätter hat eine ausgewachsene Buche in einem Wald ungefähr? \n<rot> 260, \n<grün> 2.600, \n<gelb> 26.000, \n<blau> 260.000");
    questionBoard4.setQuestion("4. Was ist merkwürdig an dem Baum, der im Garten des Hauses steht? \n<rot> Der Baum hat nur zwei grüne Blätter. \n<grün> Der Baum hat zwei völlig verschieden gestaltete Blätter. \n<gelb> Der Baum steht in einem Garten. \n<blau> Der Baum ist fast so groß wie das Haus.");

    questionBoard1.setAnswer("gruen");
    questionBoard2.setAnswer("rotR");
    questionBoard3.setAnswer("gelbE");
    questionBoard4.setAnswer("gruenT");
}

Hope this helped!


#7

Thanks again. It was working fine. But now somehow it doesnt.
I can still open the door but the “setText” function is not working anymore.

The error is:
Uncaught exception found…
delightex.CoSpaces-0.js:4479 com.google.gwt.core.client.JavaScriptException: (TypeError) : this.textItem.setText is not a function
at Unknown.setzeFrage(Reise_in_den_Mikrokosmos.js)
at Unknown.stelleFragen(Reise_in_den_Mikrokosmos.js)
at Unknown.eval(Reise_in_den_Mikrokosmos.js)
at Unknown.RWh(delightex.CoSpaces-0.js)
at Unknown.QWh(delightex.CoSpaces-0.js)
at Unknown.uci(delightex.CoSpaces-0.js)
at Unknown.uDd(delightex.CoSpaces-0.js)
at Unknown.RWf(delightex.CoSpaces-0.js)
at Unknown.Oae(delightex.CoSpaces-0.js)
at Unknown.Rae(delightex.CoSpaces-0.js)
at Unknown.Vae(delightex.CoSpaces-0.js)
at Unknown.gMd(delightex.CoSpaces-0.js)
at Unknown.DEk(delightex.CoSpaces-0.js)
at Unknown.WEk(delightex.CoSpaces-0.js)
at Unknown.kFk(delightex.CoSpaces-0.js)
at Unknown.e(delightex.CoSpaces-0.js)
at Unknown.hom(delightex.CoSpaces-0.js)
at Unknown.e(delightex.CoSpaces-0.js)

I would appreciate your help.


#8

Hi @Sinahpe

we have recently updated our text items. Try replacing the existing text items in your scene with the new ones from the Building Block category. Make sure to re-name the new text items just like the old ones.

Please let me know if this worked!


#9

Hello @Stefan

i dont get what you mean by that. What do I have to replace the game and text items with.
Also the textscript doesnt understand Space and Scene anymore.
Thanks again


#10

I also tried to change the code to javascript. still doesnt work.


#11

Hi @Sinahpe

to replace the text item, simply delete the current text item and use a new one from the Building Block category. Make sure to give the new text item the same name as the old one (see example below).

Could you also share the latest version of your space via the share button?


#12

Oh well. Now i got that. Thanks a lot. Will be sending the latest version as soon as i am done.


#13

Now that the space is finished the first scene is not working anymore. There might be a problem with:
//Sobald der Baum angesehen wird, werden die Tafeln aktiviert
let baum = Scene.getItem(“Baum”) as GameItem;
baum.onHover((isHovered: boolean) => {
if (isHovered) {
Space.log(“Hovered.”);
stelleFragen();
spieleSound();

    //Wenn man "null" in der onHover Methode übergibt, wird das Hover-Ereignis vom Item entfernt 
    baum.onHover(null)
}

});


#14

Hi @Sinahpe,

you are correct to notice the error in the onHover function which will be fixed at the end of this month.

Please change this code:

baum.onHover((isHovered: boolean) => {
    if (isHovered) {
        stelleFragen();

        //Wenn man "null" in der onHover Methode übergibt, wird das Hover-Ereignis vom Item 
        baum.onHover(null)
    }
});

Into this code:

baum.onHover(() => {
    stelleFragen();

    //Wenn man "null" in der onHover Methode übergibt, wird das Hover-Ereignis vom Item entfernt 
    baum.onHover(null)
});