Post
Ask Question

MVC Web API And AngularJS: Are You Genius Game

dted
 
*Kindly view my YouTube Video link to learn MVC Web API and AngularJS For Are You Genius Game. 

Are you Genius?

This game I have created by the inspiration of the “Who Wants to Be a Millionaire”. It is a world famous TV Show. In India, similar TV Show has been telecasted in Tamil Language as “Neengalum Vellalam Oru Kodi “ and in Hindi language as “Kaun Banega Crorepati”. On the Internet we can see plenty of similar online games and mobile app games mostly created with flash programming. I thought to make things simpler by creating one with MVC using AngularJS and WEB API. I love to make games rather than play games. So to make new games now I have started playing games. I have followed the same rules to make this game and instead of Money ($) I have used Points and named my game as “Are You Genius”. Here is the link of Wikipedia that explains Who Wants to Be a Millionaire: game https://en.wikipedia.org/wiki/Who_Wants_to_Be_a_Millionaire%3F.

  

Let’s see what is rule to play my game Are You Genius:

Instead of money in my game I have used Points. Total points to win the game is 1 Million..

You will be having 15 Questions, each question will have 30 seconds. You have to answer each question within 30 seconds. For each question you can see 4 choice of answers and you have to pick the correct answer from the question. If you fail to answer within 30 seconds then you will be eliminated from the game. The person who answers all the 15 questions and wins the game is a Genius.

Lifeline: The player will have the following four lifelines:

Note: I will be using Icons in my application. User can click on these icons to use lifeline 1.

  1. Ask to Computer: (If player click this option then computer will display the Answer. Note only 90% of answers will be correct. Remaining 10% might not be correct so Player has to decide weather he/she can pick the answer or not.).

  3. 50/50: The 2 non-correct answers from the choice will be removed. Player has to select the correct answer from the remaining 2 choices.

  4. Ask to Shanu: (If player click this option then SHANU (The Program creator) will display the Answer. Note only 90% of answers will be correct. Remaining 10% might not be correct so Player has to decide weather he/she can pick the answer or not.)
  5. Change Question: (Using this option user can change the current question to some other choice of question. If user click changeuestion then some other random question will be displayed. Note it can be easy or difficult since the random question is displaying, so the player has to think and decide to use this option. It’s a tricky one.)

Points for each question from 1st to 15th question.


Safe Zone

In each 5th question the player will reach the Safe Zone. Here in points we can see in each 5th question I have marked different color. Now for example let’s consider a player is playing this game and he/she answered 5 questions correctly and in 6th question if he picks the wrong answer then he will be getting total 1000 Points. If the player plays a game and he/she answers 3 questions correctly and for the 4th question if he picks the wrong answer then he will get 0 points no matter he answered 3 questions correctly. The player has to pick the correct answer. If he/she picks the wrong answer then he will be getting his last safe zone points. For example, a player answers 12 questions correctly and in 13th question if he picks the wrong answer then he will be getting 32,000 instead of 125,000 Points of 12th question. If the player answers all the 15 questions correctly then he’s the winner and will be a genius.

Walk Away

You can leave the game if you don’t want to lose all your points. For example, now you have answered 3 questions and before each question asked you will be asked to continue or walk away. If you select Walk Away, then you will get the last earned points. For example, now if you have answered 13 questions and if you click Walk Away before answering 14th question, then you will get 250,000 Points.

Timer

Each question will contain 45 second. If the player not pick the answer within 45 second then he will get the last answered point and will be eliminated from the game.

All this game rules logic has been implemented in my MVC application using AngularJS and WEB API. In code part we can see in detail how to implement this logic to make our own game.

Prerequisites

Visual Studio 2015 - You can download it from here.

You can also view my previous articles related to AngularJS using MVC and the WCF Rest Service.

Previous articles related to Angular JS,MVC and WEB API:

This article will explain in detail how to create an Online Are You Genius Game using MVC, Angular JS and WEB API 2. This article will explain the following:

  1. How to create sample tables and database at SQL Server.
  2. Using Entity Framework connect to database.
  3. Create WEB API controller to get the data and select random 16 result using LINQ query.
  4. How to install the Angular JS Package into a MVC application.
  5. How to create our Angular JS application to create our own Are You Genius Game.

AngularJS

We might be familiar with what Model, View, View Model (MVVM) and Model, View and Controller (MVC) are. AngularJS is a JavaScript framework that is purely based on HTML, CSS and JavaScript.

The AngularJS Model View Whatever (MVW) pattern is similar to the MVC and MVVM patterns. In our example I have used Model, View and Service. In the code par, let's see how to install and create AngularJS in our MVC application.

If you are interested in reading more about AngularJS, then kindly go through the following link.

Code Part

1. Create Database and Table.

We will create a QuestionDetails table under the Database ‘GeniusDB.

The following is the script to create a database, table and sample insert query. Run this script in your SQL Server. I have used SQL Server 2014. 

  1. USE MASTER  
  2. GO  
  3.   
  4. -- 1) Check for the Database Exists .If the database is exist then drop and create new DB  
  5.   
  6. IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'GeniusDB' )  
  7. DROP DATABASE GeniusDB  
  8.   
  9. GO  
  10.   
  11. CREATE DATABASE GeniusDB  
  12. GO  
  13.   
  14. USE GeniusDB  
  15. GO  
  16.   
  17.   
  18. -- 1) //////////// ItemDetails table  
  19.   
  20. -- Create Table ItemDetails,This table will be used to store the details like Item Information  
  21. IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'QuestionDetails' )  
  22. DROP TABLE QuestionDetails  
  23. GO  
  24.   
  25. CREATE TABLE QuestionDetails  
  26. (  
  27.    Ques_ID int identity(1,1),  
  28.    Question VARCHAR(MAX)  NOT NULL,  
  29.    Option1 VARCHAR(500)  NOT NULL,  
  30.    Option2 VARCHAR(500)  NOT NULL,  
  31.    Option3 VARCHAR(500)  NOT NULL,  
  32.    Option4 VARCHAR(500)  NOT NULL,  
  33.    Answer VARCHAR(500)  NOT NULL,  
  34. CONSTRAINT [PK_QuestionDetails] PRIMARY KEY CLUSTERED    
  35. (    
  36.   Ques_ID ASC     
  37. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]     
  38. ) ON [PRIMARY]   
  39. GO  
  40.   
  41. -- Insert the sample records to the ItemDetails Table  
  42.   
  43. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('What is the Capital of India?','Delhi','OldDelhi','New Delhi','Delhi New','New Delhi')  
  44.   
  45. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('How many continent in world?','6','7','8','9','7')  
  46.   
  47. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('Seoul is the Capital of which Country?','korea North','Japan','Korea South','China','Korea South')  
  48.   
  49. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('Who is the First President of America?','George W. Bush','Barack Obama','George Washington','Abraham Lincoln','George Washington')  
  50.   
  51. --  
  52. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('who wrote Thirukural?','Avvaiyar','Thiruvalluvar','William Shakespeare','Kalidasa','Thiruvalluvar')  
  53.   
  54. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('what is the name of indian currency?','Won','Rupee','Yen','Renminbi','Rupee')  
  55.   
  56. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('How many players are there in a Cricket team?','25','40','11','6','11')  
  57.   
  58. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('How many seconds in one hour?','6','3600','36','360','3600')  
  59.   
  60. --  
  61. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('Which City located in 2 Continents - Europe and Asia?','Taipei','Ashgabat','Istanbul','Athens','Istanbul')  
  62.   
  63. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('What Bird Is Used As A Symbol Of Peace?','Peacock','Owl','Dove','White Cockatoo','Dove')  
  64.   
  65. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('who is father of Computer?','Charles Babbage','Antoine Lavoisier','Charles Cabbage','Nikola Tesla ','Charles Babbage')  
  66.   
  67. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('Where did Neil Armstrong landed?','SUN','STAR','MOON','SEA','MOON')  
  68.   
  69.   
  70. --  
  71. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('What is the nick name of Wyoming State?','Water State','Sun State','Natural State','Equality State','Equality State')  
  72.   
  73. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('Petasos beach is in which country?','Finland','Ireland','Greece','Norway','Greece')  
  74.   
  75. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('How many bones does a dog have?','Average of 319','Average of 139','Average of 913','Average of 639','Average of 319')  
  76.   
  77. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('What is the Name of South korea President who got the Noble Price for Peace?','Park Geun-hye','Kim Dae-jung','Lee Myung-bak','Roh Moo-hyun','Kim Dae-jung')  
  78.   
  79.   
  80. --  
  81. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('In which year did Sir Chandrasekhara Venkata Raman received the Nobel Prize for Physics?','1930','1979','1913','1989','1930')  
  82.   
  83. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('What is the name of supercontinent that existed during the late Paleozoic and early Mesozoic eras?','Laurasia','Gondwana','Pangaea','Pannotia','Pangaea')  
  84.   
  85. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('Who are the 4 people who won the Noble Prize 2 times?','Marie Curie,Malala Yousafzai,John Bardeen,Frederick Sanger','Marie Curie,Wolfgang Pauli,John Bardeen,Frederick Sanger','Marie Curie,Linus Pauling,John Bardeen,Frederick Sanger','Marie Curie,Linus Pauling,John Bardeen,Finn E. Kydland','Marie Curie,Linus Pauling,John Bardeen,Frederick Sanger')  
  86.   
  87. Insert into QuestionDetails(Question,Option1,Option2,Option3,Option4,Answer) values('What is the Name of present PANAMA President?','Mireya Moscoso','Juan Carlos Varela','Guillermo Endara','Martín Torrijos','Juan Carlos Varela')  
  88.   
  89.   
  90. select * from QuestionDetails  
 2. Create your MVC Web Application in Visual Studio 2015.

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.

  1. public class GeniusController : ApiController  
  2.   
  3. {  
  4.    GeniusDBEntities objAPI = new GeniusDBEntities();  
  5.    //get all Questions  
  6.    [HttpGet]  
  7.    public IEnumerable<QuestionDetail> Get()  
  8.    {  
  9.   
  10.       return objAPI.QuestionDetails.OrderBy(x => Guid.NewGuid()).Take(16).AsEnumerable();  
  11.   
  12.    }  
  13. }  

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”.

  1. /// <reference path="../angular.js" />  
  2. /// <reference path="../angular.min.js" />  
  3. /// <reference path="../angular-animate.js" />  
  4. /// <reference path="../angular-animate.min.js" />  
  5. var app;  
  6. (function () {  
  7. app = angular.module("RESTClientModule", ['ngAnimate']);  
  8. })();  

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. 

  1. app.controller("AngularJs_ImageController", function($scope, $timeout, $rootScope, $window, $http) {  
  2.   
  3.     //Global Variables    
  4.   
  5.     $scope.date = new Date();  
  6.   
  7.     $scope.MyName = "Shanu";  
  8.   
  9.     $scope.usrName = "";  
  10.   
  11.     $scope.AllQuestions;  
  12.   
  13.     //Game Hidden Table row display    
  14.   
  15.     $scope.showGameStart = true;  
  16.   
  17.     $scope.showGame = false;  
  18.   
  19.     $scope.showresult = false;  
  20.   
  21.     $scope.showlifeline = false;  
  22.   
  23.     //Game Detail Display Variables    
  24.   
  25.     $scope.Question = "";  
  26.   
  27.     $scope.Option1 = "";  
  28.   
  29.     $scope.Option2 = "";  
  30.   
  31.     $scope.Option3 = "";  
  32.   
  33.     $scope.Option4 = "";  
  34.   
  35.     $scope.Answers = "";  
  36.   
  37.     $scope.Resuts = "";  
  38.   
  39.     $scope.ImageAnswer = "won.png";  
  40.   
  41.     //Game variable declared    
  42.   
  43.     $scope.questionCount = 1;  
  44.   
  45.     $scope.totalPoints = 0;  
  46.   
  47.     $scope.rowCount = 0;  
  48.   
  49.     //To Display Game Lifeline Images and Status    
  50.   
  51.     $scope.imgcomputer = "computerE.png";  
  52.   
  53.     $scope.imgcomputerStatus = 0;  
  54.   
  55.     $scope.img50 = "50E.png";  
  56.   
  57.     $scope.img50Status = 0;  
  58.   
  59.     $scope.fiftyElimination = 0;  
  60.   
  61.     $scope.imgShanu = "shanuE.png";  
  62.   
  63.     $scope.imgShanuStatus = 0;  
  64.   
  65.     $scope.imgChange = "changeE.png";  
  66.   
  67.     $scope.imgChangeStatus = 0;  
  68.   
  69.     $scope.showlifelinetext = "";  
  70.   
  71.     //To Display Game Lifeline Images and Status    
  72.   
  73.     $scope.answer1ClickStatus = 0;  
  74.   
  75.     $scope.answer2ClickStatus = 0;  
  76.   
  77.     $scope.answer3ClickStatus = 0;  
  78.   
  79.     $scope.answer4ClickStatus = 0;  
  80.   
  81.     //Timer to display the countdown    
  82.   
  83.     $scope.counter = 45;  
  84.   
  85.     var countdownStop;  

Game Start Function

By default I will display how to play the game with instructions to the player. Player can enter their name and "Click to Start Game" button to start the new game.


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. 

  1. $scope.startGame = function () {  
  2.   
  3.    if($scope.usrName=='')  
  4.    {  
  5.       alert("Enter Your Name to start the game !");  
  6.       $scope.showGameStart = true;  
  7.       $scope.showGame = false;  
  8.       $scope.showresult = false;  
  9.    }  
  10.    else  
  11.    {  
  12.       selectGameDetails();  
  13.       $scope.timerCountDownStart();  
  14.       $scope.showGameStart = false;  
  15.       $scope.showGame = true;  
  16.       $scope.showresult = false;  
  17.    }  
  18. }  

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 /')

I will get 16 random questions from the database and store the result data to $scope. Question. For first question the rowcount will be 0. I will display the 1st Questions information with Answer. 
  1. //get all Game Details from Database  
  2. function selectGameDetails() {  
  3.    $http.get('/api/Genius/').success(function (data) {  
  4.       $scope.AllQuestions = data;  
  5.       if ($scope.AllQuestions.length > 0) {  
  6.          $scope.Question = $scope.AllQuestions[$scope.rowCount].Question;  
  7.          $scope.Option1 = $scope.AllQuestions[$scope.rowCount].Option1;  
  8.          $scope.Option2 = $scope.AllQuestions[$scope.rowCount].Option2;  
  9.          $scope.Option3 = $scope.AllQuestions[$scope.rowCount].Option3;  
  10.          $scope.Option4 = $scope.AllQuestions[$scope.rowCount].Option4;  
  11.          $scope.Answers = $scope.AllQuestions[$scope.rowCount].Answer;  
  12.       }  
  13.    })  
  14.    .error(function () {  
  15.       $scope.error = "An Error has occured while loading posts!";  
  16.    });  
  17. }  

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.

  1. $scope.timerCountDownStart = function() {  
  2.     countdownStop = $timeout(function() {  
  3.         console.log($scope.counter);  
  4.         if ($scope.counter >= 1) {  
  5.             $scope.counter--;  
  6.             $scope.timerCountDownStart();  
  7.         } else {  
  8.             $scope.timerCountDownStop();  
  9.             $scope.pointsCalculations(1);  
  10.             $scope.Resuts = "Sorry Time out " + $scope.usrName + " You lose the game :( .Your Total points are " + $scope.totalPoints;  
  11.             alert($scope.Resuts)  
  12.             $scope.ImageAnswer = "lose.png";  
  13.             $scope.wrongAnswerandLoseGame();  
  14.         }  
  15.     }, 1000);  
  16. };  
  17. $scope.timerCountDownStop = function() {  
  18.     $timeout.cancel(countdownStop);  
  19. }  

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. 

  1. //to check the Computer Lifeline already used or not If its not used then change the Computer image to Disabled Image.User can click (use only) one time  
  2. $scope.funComputerLifeline = function () {  
  3.    if($scope.imgcomputerStatus==0)  
  4.    {  
  5.       $scope.imgcomputer = "computerD.png";  
  6.       $scope.imgcomputerStatus = 1;  
  7.       $scope.showlifelinetext = "Computer Says the Correct Answer might be " + $scope.Answers + " Pick Your Choice ";  
  8.       alert($scope.showlifelinetext)  
  9.       $scope.showlifeline = true;  
  10.    }  
  11. }  

  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.

  1. //to check the 50/50 Lifeline already used or not If its not used then change the 50/50 image to Disabled Image.User can click (use only) one time    
  2. $scope.funFiftyLifeline = function() {  
  3.     if ($scope.img50Status == 0) {  
  4.         if ($scope.Option1 != $scope.Answers) {  
  5.   
  6.             if ($scope.fiftyElimination <= 1) {  
  7.                 $scope.Option1 = "";  
  8.                 $scope.fiftyElimination = $scope.fiftyElimination + 1;  
  9.             }  
  10.         }  
  11.         if ($scope.Option2 != $scope.Answers) {  
  12.             if ($scope.fiftyElimination <= 1) {  
  13.                 $scope.Option2 = "";  
  14.                 $scope.fiftyElimination = $scope.fiftyElimination + 1;  
  15.             }  
  16.         }  
  17.         if ($scope.Option3 != $scope.Answers) {  
  18.             if ($scope.fiftyElimination <= 1) {  
  19.                 $scope.Option3 = "";  
  20.                 $scope.fiftyElimination = $scope.fiftyElimination + 1;  
  21.             }  
  22.         }  
  23.         if ($scope.Option4 != $scope.Answers) {  
  24.             if ($scope.fiftyElimination <= 1) {  
  25.                 $scope.Option4 = "";  
  26.                 $scope.fiftyElimination = $scope.fiftyElimination + 1;  
  27.             }  
  28.         }  
  29.         $scope.img50 = "50D.png";  
  30.         $scope.img50Status = 1;  
  31.     }  
  32. }  

 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. 

  1. //to check the Shanu Lifeline already used or not If its not used then change the Shanu image to Disabled Image.User can click (use only) one time  
  2.   
  3. $scope.funShanuLifeline = function () {  
  4.    if ($scope.imgShanuStatus == 0) {  
  5.       $scope.imgShanu = "shanuD.png";  
  6.       $scope.imgShanuStatus = 1;  
  7.       $scope.showlifelinetext = "Shanu Says the Correct Answer might be " + $scope.Answers + " Pick Your Choice ";  
  8.       alert($scope.showlifelinetext)  
  9.       $scope.showlifeline = true;  
  10.    }  
  11. }  

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. 

  1. //to check the Change Question Lifeline already used or not If its not used then change the Change Question image to Disabled Image.User can click (use only) one time  
  2.   
  3. $scope.funChangeLifeline = function () {  
  4.    if ($scope.imgChangeStatus == 0) {  
  5.       $scope.imgChange = "changeD.png";  
  6.       $scope.imgChangeStatus = 1;  
  7.       $scope.NextQuestion(1);  
  8.    }  
  9. }  

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 1st question correctly, then I will display the 2nd 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. 

  1. <tr>  
  2.    <td ng-class="{changeColor: questionCount == '2', actualColor: questionCount != '2'}" align="center">  
  3.       <b>2</b>  
  4.    </td>  
  5.    <td ng-class="{changeColor: questionCount == '2', actualColor: questionCount != '2'}" align="center">  
  6.       <b>200 (Points)</b>  
  7.    </td>  
  8. </tr>  

CSS

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

  1. .actualColor {  
  2.    background-color: #c2cfd8; color:#9F000F ;border: solid 1px #659EC7;cursor: pointer;  
  3. }  
  4. .changeColor {  
  5.    background-color: #ff0000; color:#FFFFFF ;border: solid 1px #659EC7;cursor: pointer;  
  6. }  

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.

  1. // If answer correctly then display the next Question    
  2. $scope.NextQuestion = function(nextQuestionCount) {  
  3.     if (nextQuestionCount == 1) {} else {  
  4.         if ($scope.questionCount <= 14) {  
  5.             var strconfirm = confirm("Do you Like to Continue or Walk Away.if you would like to continue the game click YES if you want to Quit game and go with the money then click Cancel?");  
  6.             if (strconfirm != true) {  
  7.                 $scope.pointsCalculations(0);  
  8.                 $scope.Resuts = "Thank You for Playing " + $scope.usrName + " Your Total points are " + $scope.totalPoints;  
  9.                 alert($scope.Resuts)  
  10.                 $scope.ImageAnswer = "won.png";  
  11.                 $scope.wrongAnswerandLoseGame();  
  12.                 return true;  
  13.             }  
  14.         }  
  15.         $scope.questionCount = $scope.questionCount + 1;  
  16.         $scope.timerCountDownStart();  
  17.         $scope.counter = 45;  
  18.     }  
  19.   
  20.     $scope.rowCount = $scope.rowCount + 1;  
  21.     $scope.timerCountDownStop();  
  22.     $scope.Question = $scope.AllQuestions[$scope.rowCount].Question;  
  23.     $scope.Option1 = $scope.AllQuestions[$scope.rowCount].Option1;  
  24.     $scope.Option2 = $scope.AllQuestions[$scope.rowCount].Option2;  
  25.     $scope.Option3 = $scope.AllQuestions[$scope.rowCount].Option3;  
  26.     $scope.Option4 = $scope.AllQuestions[$scope.rowCount].Option4;  
  27.     $scope.Answers = $scope.AllQuestions[$scope.rowCount].Answer;  
  28.     $scope.answer1ClickStatus = 0;  
  29.     $scope.answer2ClickStatus = 0;  
  30.     $scope.answer3ClickStatus = 0;  
  31.     $scope.answer4ClickStatus = 0;  
  32.     $scope.showlifeline = false;  
  33.     $scope.showlifelinetext = "";  
  34. }  

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 2nd 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.

  1. //Answer A Clicked    
  2. $scope.answerAClicked = function() {  
  3.     if ($scope.Option1 == $scope.Answers) {  
  4.         $scope.answer1ClickStatus = 2;  
  5.         if ($scope.questionCount <= 14) {  
  6.             $scope.NextQuestion(0);  
  7.         } else if ($scope.questionCount == 15) {  
  8.             $scope.Resuts = "Wow " + $scope.usrName + " :) you won the game .You are the real Genius .Your total points is 1 Million :)";  
  9.             alert($scope.Resuts)  
  10.             $scope.ImageAnswer = "won.png";  
  11.             $scope.wrongAnswerandLoseGame();  
  12.         }  
  13.     } else {  
  14.         $scope.answer1ClickStatus = 3;  
  15.         $scope.wrongAnswerPoints();  
  16.         $scope.Resuts = "Sorry Wrong Answer Dear " + $scope.usrName + " You lose the game :( .Your Total points are " + $scope.totalPoints;  
  17.         alert($scope.Resuts)  
  18.         $scope.ImageAnswer = "lose.png";  
  19.         $scope.wrongAnswerandLoseGame();  
  20.     }  
  21. }  

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

 

  1. //for calculating wrong answer points    
  2. $scope.wrongAnswerPoints = function() {  
  3.     if ($scope.questionCount <= 4) {  
  4.         $scope.totalPoints = "0";  
  5.     } else if ($scope.questionCount <= 9) {  
  6.         $scope.totalPoints = "1,000";  
  7.     } else if ($scope.questionCount <= 14) {  
  8.         $scope.totalPoints = "32,000";  
  9.     }  
  10. }  

 

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.


Similar Articles