MVC Web API And AngularJS: Are You Genius Game

After installing our Visual Studio 2015 click Start, then Programs and select Visual Studio 2015- Click Visual Studio 2015

Click New, then Project, select Web and click ASP.NET Web Application. Select your project location and enter your web application name.

Select MVC and in Add Folders and Core reference for select the Web API and click OK.

Add Database using ADO.NET Entity Data Model

Right click our project and click Add, then New Item.

Select Data, then ADO.NET Entity Data Model and give the name for our EF and click Add.

Select EF Designer from the database and click Next >

Here click New Connection and provide your SQL Server - Server Name and connect to your database.

Here we can see I have given my SQL server name, Id and PWD and after it connected I selected the database as GeniusDB as we have created the Database using my SQL Script.

Click next and select the tables need to be used and click finish.

Here we can see now we have created our GeniusDBModel.

Once Entity has been created, the next step we add WEB API to our controller and write function to Select/Insert/Update and Delete.

Steps to add our WEB API Controller

Right Click Controllers folder, click Add and then click Controller.

As we are going to create our WEB API Controller. Select Controller and Add Empty WEB API 2 Controller. Give name to Web API controller and click Ok. Here for my Web API Controller I have given name “GeniusController”.

As we have created Web API controller, we can see our controller has been inherited ApiController.

As we all know Web API is a simple and easy to build HTTP Services for Browsers and Mobiles:

Web API has four methods as Get/Post/Put and Delete where:

• Get is to request for the data. (Select)
• Post is to create a data. (Insert)
• Put is to update the data.
• Delete is to delete data.

In our example we will use Get method, since we need to get all the Puzzle Question details from the database.

Get Method

In our example I have used only Get method as I am using it to select data from the database to display the Word Puzzle game. We need to create object for our Entity and write our Get Method to perform Select operations.

Select Operation

We use Get Method to get all the details of QuestionDetail table using entity object and we return the result as IEnumerable .

Here we can see in Get Method, I have used the Take method to display only 16 records from the database. To select the random record from the database I have used the Guid.NewGuid().

We use this method in our AngularJS and display the result in MVC HTML page.

Creating AngularJS Controller

Firstly, create a folder inside the Script Folder and I will give the folder name as “MyAngular”.

Now add your Angular Controller inside the folder.

Right click the MyAngular folder and click Add, then New Item and select Web. After that select AngularJS Controller and give name to Controller. I have given my AngularJS Controller as “Controller.js”.

Once the AngularJS Controller is created, we can see by default the controller will have the code with default module definition and all.

I have changed the above code like adding Module and controller like the following.

If the AngularJS package is missing, then add the package to your project.

Right click your MVC project and click Manage NuGet Packages. Search for AngularJS and click Install.

Steps to Create AngularJs Script Files

Modules.js: Here we add the reference to the Angular.js javascript and create a Angular Module named “RESTClientModule”.

Controllers: In AngularJS Controller I have performed all the business logic and returnED the data from WEB API to our MVC html page.

Variable declarations

FirstLy I declared all the local variables that needs to be used. For each variable I have added the comments.

Game Start Function

In the Start game button click I called the AngularJS Method startGame to check whether user has entered the name or not. If user did not entered their name I will ask to enter the name to start the game. If user has entered the name then I will call the function to display the first question to the user. Note the questions are random, so every time the first question will not be repeated. Then I will call the timerCountDownStart function. In this function I will start the countdown and it will start from 45 and decrease the value by 1 till 0. The player will have 45 seconds for each question.

selectGameDetails() To display each question.

When user clicks on Start game button I displayed the Question No. as 1, by using the $http.get(/api/ Genius /')

Timer Countdown

timerCountDownStart() To start the countdown.

In this method the countdown will start from 45 and decrease the value by 1 till 0. The player will have 45 seconds for each question. I will decrement the counter value one by one.

When the counter value is 0, then I will stop the timer and display the alert message as you lose the game and display the players last points value. Here we can see the points as 0 since in my first question I didn’t answered the question within 45 seconds.

Lifeline Support:

As I have already told in this game user has 4 lifelines, he/she can use all these 4 lifelines in his game to win the Genius Prize.

Let’s see the lifeline one by one:

Ask to Computer: If user don’t know the current question iser can ask the computer to display the Answer. Note the Answer has 90% of chances to be correct, so the player has to decide whether to pick the computer presented answer or not. This Lifeline can be used only one time per game for a player. Here we can see for the following question I don’t know the answer so I clicked one the Ask to Computer lifeline. Once I clicked on that the Ask to computer image will be changed to disabled image. User can click and use only one time, so think before using this option.

Here we can see when I click on the Ask to computer lifeline. The computer will display the answer at the top as “Computer says the correct Answer might be “Average of 319”, pick your choice.

50/50: The 2 incorrect answers from the choice will be removed. Player has to select the correct answer from the remaining 2 choices. Player can use this lifeline to remove any 2 unanswered choice from the 4 choice of answers. We can see here for this question I have used the 50/50 lifeline. This lifeline can be used only once.

Here we can see when I clicked on the 50:50 Lifeline. It will remove the 2 inorrect answers. Here B and C has been removed and now player has 2 choice of A and D. The player need to select the correct answer from A and D. We can also see the countdown will be running here the countdown is 26 and user need to pick the answer within time. And user can use the 50:50 lifeline only one time. Here we can see the 50:50 lifeline image has been changed to disabled image. In code part we can see I will check for the options with answer and remove 2 unmatched options from the list.

Ask to Shanu: This is similar to Ask to computer Lifeline. If user don’t know the current question user can Ask to Shanu for displaying the Answer. Note the Answer has 90% chances of being correct, so the player has to decide whether to pick that SHANU presented an answer or not. This Lifeline can be used only one time per game for a player. Here we can see for the following question I don’t know the answer, so I have clickednAsk to Shanu lifeline. Once I clicked on that the Ask to computer image will be changed to disabled image. User can click and use only one time so think before using this option.

Here we can see when I click on the Ask to computer lifeline. The computer will display the answer at the top as “Shanu says the correct Answer might be “Thiruvalluvar” pick your choice.

Change Question: (Using this option user can change the current question to some other choice of question. If user click change Question then some other random question will be displayed. Note it can be easy or difficult as the random question displaying, so the player has to think and decide to use this option. It’s a tricky one.)

Here we can see when user click on Change Lifeline I will disable the option and call the NextQuestion Method to display some other random question for the player to play the game.

Current Question display: Once the player answered the question I will be incrementing QuestionCount to display the next question, In the mean time on the right side of the points and question number displays and I will dynamically change the current question Table cell back color to red color. Here we can see after I have answered the 1^st question correctly, then I will display the 2^nd question pointing by red color on the right side dynamically.

HTML

Here is the sample 2 answer table cell design of html. Here we can see in Table cell using AngularJS ng-class. I will check for current questionCount and display the cell color to red or default color. If the Answer is 2, then I will display the red color by checking the QuestionCount.

CSS

In CSS, I will be setting the table cell color for actual changeColor for current question color.

AngularJS

In the next question method, I will increment the questioncount and display the next question to the user. In Next Question method I will check for the user confirmation as he want to play the game or to walk away from the game with current points. If a user clicks OK, then he/she will continue to play the next question. If the player clicks on cancel then he will walk away (Quit) from the game and he will get the last answer points.

Walkaway: Each question before user can continue the game or Walkaway (Quit) the game and get the last answered questions point with him. Here we can see after my 2^nd answer I cancel to continue the game and selected Walkaway and my points was been 200

Answer: When user clicks on each answer I will check for the user clicked answer with the actual answer. If both answers are correct, then I will display the next question.

Here we can see I clicked the correct answer and if I clicked OK, then it will display next question to play.

Wrong Answer: If the player picked the wrong answer I will display the message with his current points earned.

Genius: If the player answered all the 15 questions, then he will be considered as Genius. Here we can see that I have answered all the 15 questions and won 1 Million Points.

Note: You can change the database as per your connection. All questions and answers displayed from the database. You can add any number of questions and answers in the table. Every time I will filter only 16 random questions from the database. If you add more questions and answer that will avoid the repeated questions to the player. Hope you liked this game. Have fun!

Tested Browsers: Chrome and IE 11.