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!
