Forums » Help » Designing a questions answer framework

Hello,

I am new to impactjs and currently trying to figure out the engine in general as I am pretty new to javascript.

we are trying to implement a "question and answer" interface in our game. So when the player goes near an object or a particular event occurs ( mouse click on an object ) or something, a new question dialog box appears on the screen. The dialog box has a question, an input box and a submit button.

We have around 5-6 questions for now and we are using mongodb database to store the questions with their id and solved state if the player answers the questions correctly and presses the submit button.

More specifically, how do I incorporate a framework such that with every other event a new question tagged to the question id in the database appears on the dialog box and how do I implement a submit button on the box?

As I am switching from c++, java to javascript where I have no idea how to implement this using classes and oop, how would you suggest us designing a framework for this sort of architecture?

Thank you!

I do a lot of stuff with Q and A.

Here is a simple plugin that I wrote to handle some Q & A stuff
in my game:

ig.module( 
    'plugins.quizbox' 
)
.requires(
    'impact.impact'
)
.defines(function(){

Quizbox = ig.Class.extend({ 
	
	a:null,
	b:null,
	c:null,
	d:null,
    
	init: function( ) {
        
    },
	
    quiz: function( ) {
		var player = ig.game.getEntityByName("playa");
		if (player.alive == true && ig.game.quiz == false) {
			//Call method in player entity to pause him (and all others)
      		player.paused();
	
			//Spawn Answerchoices
			ig.game.spawnEntity(EntityChalkboard,ig.game.screen.x,ig.game.screen.y);
			ig.game.spawnEntity(EntityAnswerchoiceone,ig.game.screen.x,ig.game.screen.y);
			ig.game.spawnEntity(EntityAnswerchoicetwo,ig.game.screen.x,ig.game.screen.y);
			ig.game.spawnEntity(EntityAnswerchoicethree,ig.game.screen.x,ig.game.screen.y);
			ig.game.spawnEntity(EntityAnswerchoicefour,ig.game.screen.x,ig.game.screen.y);
			
			//Shuffle Responses (I randomize answer appearance)
			var ac = 1+Math.floor(Math.random()*2);
			this.randomizeAnswers(ac);
			//Ask the question (I use a global variable for some reason that I can't remember)
            //2 is set to how many question choices you have.
            ig.game.ch = 1+Math.floor(Math.random()*2);
			this.question(ig.game.ch);
		}
    },
	randomizeAnswers: function( n ) {
		switch(n) {
		case 1:
			this.answers1();
			break;
			
		case 2:
			this.answers2();	
			break;
		}
    },
	answers1: function( ) {
		ig.game.answerChoiceOne="Meeny";
		ig.game.answerChoiceTwo="Eeny";
		ig.game.answerChoiceThree="Moe";
		ig.game.answerChoiceFour="Miney";
	},
	answers2: function( ) {
		ig.game.answerChoiceOne="Eeny";
		ig.game.answerChoiceTwo="Meeny";
		ig.game.answerChoiceThree="Miney";
		ig.game.answerChoiceFour="Moe";
	},
	question: function( n ) {
		switch(n) {
		case 1:
			this.q1();
			break;

		case 2:
			this.q2();
			break;
    },
	q1: function( ) {		
		ig.game.theQuestion = "Capital of U.S.A.";
		ig.game.theCorrection = "That is Washinton D.C.";
		ig.game.theRightAnswer = "Eeny";
	},
	q2: function( ) {		
		ig.game.theQuestion = "My favorite color.";
		ig.game.theCorrection = "That is periwinkle.";
		ig.game.theRightAnswer = "Moe";
	},
});
});

Basically, when a question is triggered,
the quiz function is called,
which pauses the game,
spawns multiple choice entities and a question board entity.

The question it self is written over the board using the draw function
in the main.js file.

I use something like this

//WRITE THE QUESTION
		
			//Format the Question
				if (this.formatTheQuestion == false) {
					//Add a space to prevent strange line break at the end.
					this.theQuestion = this.theQuestion + " ";

					//Take the text that will go on the board and make it fit.
				
					this.theTinyQuestion = this.theQuestion.replace(/.{1,66} /g, "$&\n");
					this.theQuestion = this.theQuestion.replace(/.{1,41} /g, "$&\n");
					this.theCorrection = this.theCorrection + " ";
					this.theCorrection = this.theCorrection.replace(/.{1,41} /g, "$&\n");
					this.formatTheQuestion = true;
				}
				//Write the question	
				if (this.questionOn == true) {
					this.mp44.draw( this.theQuestion, this.questionX, this.questionY);
				}
				else if (this.correctionOn == true) {
					if (ig.game.wasItRight == true) {
						this.correct.draw(this.questionX, this.questionY);
						this.mp28.draw(this.theTinyQuestion, this.tinyQuestionX, this.tinyQuestionY);
					}
					else {
						this.incorrect.draw(this.questionX, this.questionY);
						this.mp28.draw(this.theTinyQuestion, this.tinyQuestionX, this.tinyQuestionY);
					}
					this.mp44.draw( this.theCorrection, this.questionX, this.questionY + 80);				
				}
			}
		}

to format the question using the impact font set,
but I think it makes more sense to use the HTML5 canvas font.

Then I bring the game back into play with this from the player enitity:

if (ig.game.correctionOn == true && ig.game.quiz == true && ig.input.pressed('click')) {
			if (ig.game.wasItRight == true) {
				this.right();
			}
			else {
				this.wrong();
			}
			this.unpaused();
			ig.game.correctionOn = false;
			ig.game.quiz = false;
		}

I've hacked this up a bit to wipe off some of my fingerprints,
so it may not work exactly as is.

In any event,
I'm certainly not the best programmer around here,
but this is how I have addressed my question and answer problems.

Hey Donzo,

Firstly, thank you so much for taking your time out trying to help me.

I should have given a more clear idea of what I plan to do and things that I have already implemented.

I have created a questions entity class which for now displays a simple dialog box with some text in it when certain event occurs from outside.

What I want is that my dialog box get connected to the mongo db, collect questions information from the backend and display it on the dialog box. Each event will have to generate a different set of question. Say first click event generates question one pulling out information from the database based on id. Second event will generate a different question and so on. So in short, I want to have just one questions entity class which gets spawned on event click and generates a new question based on the type of the event.

Also, I want to have an input box where the player gives their answer. It is not multiple choice. All question types are the same. Every player needs to enter the answer in the input box. This box again should reside inside the dialog box below the question.

And finally I want to have a submit button on the dialog box. The state of the answer (right/wrong) calls the database and stores the value if the answer is correct.

looks like a complicated system? Can all this be implemented using just one "questions" entity class and this class being called from outside somewhere triggered by events.

If anyone could give a brief or detailed idea of how this can be implemented, it would be greatly appreciated. Thanks a lot!!

I'm going to assume you already have a connection layer set up and you can connect and read/write data to the db and get this on the client site. That way you can just do some ajax type of calls to transfer information.

With that said, and not really knowing the design of the game, it almost seems like you could write this without impact at all. Impact doesn't support HTML elements, so you will not be able to add an input text field or submit buttons inside the canvas. You can add these outside of the canvas and control them by input, since it's just really JS. With some CSS magic you can layer them on top of the Canvas.

Without writing out a bunch of pseudo code, I would write a question entity that is similar to what Donzo suggested. In my init, I could connect to the DB and get the question, info, answer, etc. I would pass the question ID on init, so it's simple to extend from.

With the all that info in the new object you can draw out each case of the question and be able to check the answer in real time, without touching the db. Then just update the DB after the QA cycle.

When that cycle is done, I would destroy that entity and spawn the next one, with the next question id.

The actual logic to when to spawn a question entity and what events to use is all up to your game design and logic.

Thanks a lot stillen. Makes total sense now.

And no I have not setup a connection layer to read/write data from mongo db. I really have no idea how to do that. I know how to create a collection in mongodb but how do I retrieve and use those values in impactjs?? Any online references would be helpful too.
Thanks

There's no out of the box connection to a DB with impact. You would need to write up a simple web service on the DB server to handle the data. I would use a simple REST api to get the question info based on the question_id for example.

You can write this layer in almost any language you are familiar with, I do must of mine in PHP but node is also great, popular and is JS so learning node and impact will benefit each other.

Once that is set up, you could just do the basic ajax and get the info/set the info. You can wrap Jquery into a game very easily so you can handle ajax requests as well. I would also use json as a data format, to keep it simple.

There a lot of info on the mongoDB site about different languages and how to handle data.
http://docs.mongodb.org/ecosystem/