Quiz

class MyApp extends App{
	
	numberOfAnsweredQuestions = 0
	numberOfCorrectAnswers = 0
	
	createStartPage(){
		return Question1Page
	}
	
	onCorrectAnswer(){
		a.numberOfAnsweredQuestions += 1
		a.numberOfCorrectAnswers += 1
	}
	
	onWrongAnswer(){
		a.numberOfAnsweredQuestions += 1
	}
	
	reset(){
		a.numberOfAnsweredQuestions = 0
		a.numberOfCorrectAnswers = 0
	}
	
}

class Question1Page extends Page{
	
	createGui(){
		return Rows.children(
			
			Text.text(`Question 1`),
			
			Text.text(`Which colors does the Swedish flag consist of?`)
				.grow(2),
			
			Rows.grow(1).children(
				
				Columns.grow(1).children(
					Button.text(`Red and Blue`).grow(1).onClick(a.onWrongAnswer),
					Button.text(`Blue and Yellow`).grow(1).onClick(a.onCorrectAnswer),
				),
				
				Columns.grow(1).children(
					Button.text(`Blue and lime`).grow(1).onClick(a.onWrongAnswer),
					Button.text(`White and Red`).grow(1).onClick(a.onWrongAnswer),
				),
				
			),
		)
	}
	
	createAfterDirections(){
		return [
			Direction.page(Question2Page).when(true).text(`On answer`),
		]
	}
	
}

class Question2Page extends Page{
	
	createGui(){
		return Rows.children(
			
			Text.text(`Question 2`),
			
			Text.text(`Which country has the smallest land size?`)
				.grow(2),
			
			Rows.grow(1).children(
				
				Columns.grow(1).children(
					Button.text(`England`).grow(1).onClick(a.onWrongAnswer),
					Button.text(`Denmark`).grow(1).onClick(a.onWrongAnswer),
				),
				
				Columns.grow(1).children(
					Button.text(`Germany`).grow(1).onClick(a.onWrongAnswer),
					Button.text(`Andorra`).grow(1).onClick(a.onCorrectAnswer),
				),
				
			),
		)
	}
	
	createAfterDirections(){
		return [
			Direction.page(Question3Page).when(true).text(`On answer`),
		]
	}
	
}

class Question3Page extends Page{
	
	createGui(){
		return Rows.children(
			
			Text.text(`Question 3`),
			
			Text.text(`In which country do they speak Spanish?`)
				.grow(2),
			
			Rows.grow(1).children(
				
				Columns.grow(1).children(
					Button.text(`Spain`).grow(1).onClick(a.onCorrectAnswer),
					Button.text(`Italy`).grow(1).onClick(a.onWrongAnswer),
				),
				
				Columns.grow(1).children(
					Button.text(`Russia`).grow(1).onClick(a.onWrongAnswer),
					Button.text(`Scotland`).grow(1).onClick(a.onWrongAnswer),
				),
				
			),
		)
	}
	
	createAfterDirections(){
		return [
			Direction.page(ResultPage).when(true).text(`On answer`),
		]
	}
	
}

class ResultPage extends Page{
	
	createGui(){
		
		let text = `You got ${a.numberOfCorrectAnswers} of ${a.numberOfAnsweredQuestions} correct.`
		
		if(a.numberOfAnsweredQuestions == a.numberOfCorrectAnswers){
			text = `You got all correct, good job!`
		}else if(a.numberOfCorrectAnswers == 0){
			text = `Oh, this was not impressive at all, 0 correct answers. Better luck next time!`
		}
		
		return Rows.children(
			
			Text.text(`Result`),
			
			Text.text(text).grow(1),
			
			Columns.children(
				Space,
				Button.text(`Try again`).page(Question1Page).onClick(a.reset),
				Space,
			),
			
		)
	}
	
}