You can download the Source Code from this link Download Source Code 


Introduction

Kindly view my YouTube Video Link to learn about 

MY EASY KIDS LARN using MVC

What is Easy Kids Learn?

This is a KIDS Easy learn Game. Here we display 10 questions and in each question, we will display one Image and also we will display the hint for each question. Kids need to enter the correct spelling for each Image displayed ,For example we display Image as 10 and kids need to enter the correct word spelling as "TEN". All the Images, Hint Question and Answer will be posted by Admin. Admin can add any number of Images with Hint Question and Answers. For the Users (here users are kids) each time the 10 question’s randomly displayed. Using this application kids can easily learn spelling of words.

This application has two module one

1. Admin Module

2. User Module

Admin Module:

 Admin can logged into system using admin username and password.Admin can manage all question (Add/Edit/Delete and view) .Admin can add new question by uploading image with correct answer and hint question. This correct answer will be compared with users entered answer and if both are same then we display the result for users.

User Module:

Users not required for login to system. They can directly play the game from Home page. Here users are kids where this applications aim is for kids easily learn the words. Users can enter the name and start the game. For users we will display 10 random question, for each questions we will display one image. Users need to enter the correct spelling for each image. This will be very useful for kids to learn spelling for a word by seeing the image and with hint question.

In this article we will see how to create and manage a Question by Admin and users to play game using ASP.NET MVC, WEB API and AngularJS.

Here we will see how to,

  1. Easy Kids Question Management (Only Admin user can View All / Create /Delete and Edit Questions).
  2. Users can play the game from home page by entering their name. 

Prerequisites

Visual Studio 2015: You can download it from here.

Code part

Create Database and Table

1. Create Database and Table.

We will create a kidsLearnerMaster table under the Database ‘KidsLearnerDB.

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. 



-- ============================================= 
-- Author  : Shanu 
-- Create date : 2016-02-28 
-- Description : To Create Database 
  
-- ============================================= 
--Script to create DB,Table and sample Insert data 
USE MASTER; 
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB 
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'KidsLearnerDB' )
BEGIN
ALTER DATABASE KidsLearnerDB SET SINGLE_USER WITH ROLLBACK IMMEDIATE
DROP DATABASE KidsLearnerDB ;
END
   
   
CREATE DATABASE KidsLearnerDB
GO
   
USE KidsLearnerDB
GO
   
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'kidsLearnerMaster' )
DROP TABLE MenuMaster
GO
   
CREATE TABLE kidsLearnerMaster
(
 KIDIDENTITY int identity(1,1),
 IMAGENAME VARCHAR(200)  NOT NULL,
 ANSWER VARCHAR(100)  NOT NULL ,
 HINTQUESTION VARCHAR(200)  NOT NULL ,
CONSTRAINT [PK_MenuMaster] PRIMARY KEY CLUSTERED
(
 [kidIdentity] ASC
   
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
   
select * from kidsLearnerMaster
   
Insert into kidsLearnerMaster(IMAGENAME,ANSWER,HINTQUESTION)
 values('one.png','ONE','Its a Number this is the First Number')
   
 Insert into kidsLearnerMaster(IMAGENAME,ANSWER,HINTQUESTION)
 values('TWO.png','TWO','Its a Number with 3 Character')
   
 Insert into kidsLearnerMaster(IMAGENAME,ANSWER,HINTQUESTION)
 values('THREE.png','THREE','Its a Number with 5 Character')
   
 Insert into kidsLearnerMaster(IMAGENAME,ANSWER,HINTQUESTION)
 values('FOUR.png','FOUR','Its a Number with 4 Character')
   
 Insert into kidsLearnerMaster(IMAGENAME,ANSWER,HINTQUESTION)
 values('FIVE.png','FIVE','Its a Number with 4 Character')
   
 Insert into kidsLearnerMaster(IMAGENAME,ANSWER,HINTQUESTION)
 values('SIX.png','SIX','Its a Number with 3 Character')
   
 Insert into kidsLearnerMaster(IMAGENAME,ANSWER,HINTQUESTION)
 values('SEVEN.png','SEVEN','Its a Number with 5 Character')
   
 Insert into kidsLearnerMaster(IMAGENAME,ANSWER,HINTQUESTION)
 values('EIGHT.png','EIGHT','Its a Number and this number plus 2 is 10')
   
 Insert into kidsLearnerMaster(IMAGENAME,ANSWER,HINTQUESTION)
 values('NINE.png','NINE','Its a Number and 10 minus 1 is this number')
   
 Insert into kidsLearnerMaster(IMAGENAME,ANSWER,HINTQUESTION)
 values('TEN.png','TEN','Its a Number with 3 Character')

All this 10 default images has been uploaded to my root folder /Images. You can add more question and images directly using the application.

Stored Procedure : Run all this Procedure one by one in your SQL Server 

1) SP to select all records to display for Admin 

USE KidsLearnerDB 
GO 
-- 2) select all kidsLearnerMaster records 
-- Author  : Shanu
-- Create date :  2016-02-28
-- Description :select top 10 random kidsLearnerMaster records
-- Tables used :  kidsLearnerMaster
-- Modifier  : Shanu
-- Modify date : 2016-02-28
-- =============================================
-- To Select all user roles
-- EXEC USP_KIDSLEARN_SelectALL ''
-- =============================================
CREATE PROCEDURE [dbo].[USP_KIDSLEARN_SelectALL]
(
 @IMAGENAME  VARCHAR(100)  = ''
 )
AS
BEGIN
 SELECT
 KIDIDENTITY,IMAGENAME,ANSWER,HINTQUESTION
 FROM kidsLearnerMaster
 WHERE
 IMAGENAME like  @IMAGENAME +'%'
   
END





2) SP to select top 10 Random records to display for users to play the game. 


USE KidsLearnerDB 
GO 
  
-- 1) select top 10 random kidsLearnerMaster records 
-- Author  : Shanu
-- Create date :  2016-02-28
-- Description :select top 10 random kidsLearnerMaster records
-- Tables used :  kidsLearnerMaster
-- Modifier  : Shanu
-- Modify date : 2016-02-28
-- =============================================
-- To Select all user roles
-- EXEC USP_KIDSLEARN_Select ''
-- =============================================
CREATE PROCEDURE [dbo].[USP_KIDSLEARN_Select]
(
 @IMAGENAME  VARCHAR(100)  = ''
 )
AS
BEGIN
 SELECT TOP 10
 KIDIDENTITY,IMAGENAME,ANSWER,HINTQUESTION
 FROM kidsLearnerMaster
 WHERE
 IMAGENAME like  @IMAGENAME +'%'
 ORDER BY NEWID()
END


3) SP to Insert records by Admin

USE KidsLearnerDB 
GO 
-- 3) Insert records
   
-- Author  : Shanu
-- Create date :  2016-02-28
-- Description :Insert kidsLearnerMaster records
-- Tables used :  kidsLearnerMaster
-- Modifier  : Shanu
-- Modify date : 2016-02-28
-- =============================================
-- To Select all user roles
-- EXEC USP_KIDSLEARN_Insert ''
-- =============================================
CREATE PROCEDURE [dbo].[USP_KIDSLEARN_Insert]
 (
 @IMAGENAME  VARCHAR(100)  = '',
 @ANSWER  VARCHAR(100)  = '',
 @HINTQUESTION  VARCHAR(200)  = ''
   
 )
AS
BEGIN
 IF NOT EXISTS (SELECT * FROM kidsLearnerMaster WHERE IMAGENAME=@IMAGENAME)
 BEGIN
   
 Insert into kidsLearnerMaster(IMAGENAME,ANSWER,HINTQUESTION)
 values(@IMAGENAME,@ANSWER,@HINTQUESTION)
   
 Select 'Inserted' as results
   
 END
 ELSE
 BEGIN
 Select 'Exists' as results
 END
   
END

4) SP to Update records by Admin

USE KidsLearnerDB 
GO 
-- 4) Update kidsLearnerMaster records 
  
-- Author  : Shanu
-- Create date :  2016-02-28
-- Description :Update kidsLearnerMaster records
-- Tables used :  kidsLearnerMaster
-- Modifier  : Shanu
-- Modify date : 2016-02-28
-- =============================================
-- To Select all user roles
-- EXEC USP_KIDSLEARN_Update ''
-- =============================================
ALTER PROCEDURE [dbo].[USP_KIDSLEARN_Update]
 ( @KIDIDENTITY  VARCHAR(20)  = '',
 @IMAGENAME  VARCHAR(100)  = '',
 @ANSWER  VARCHAR(100)  = '',
 @HINTQUESTION  VARCHAR(200)  = ''
 )
AS
BEGIN
 IF  EXISTS (SELECT * FROM kidsLearnerMaster WHERE KIDIDENTITY=@KIDIDENTITY)
 BEGIN
 UPDATE kidsLearnerMaster SET
 IMAGENAME=@IMAGENAME,
 ANSWER=@ANSWER,
 HINTQUESTION=@HINTQUESTION
 WHERE
 KIDIDENTITY=@KIDIDENTITY
   
 Select 'updated' as results
 END
 ELSE
 BEGIN
 Select 'Not Exists' as results
 END
END

5) SP to Delete record by Admin

USE KidsLearnerDB 
GO 
-- 5) Stored procedure To Delete  KIDSLEARN 
  
-- Author  : Shanu
-- Create date : 2016-02-28
-- Description :To Delete KIDSLEARN detail
-- Tables used :  kidsLearnerMaster
-- Modifier  : Shanu
-- Modify date : 2016-02-28
-- =============================================
-- To delete KIDSLEARN record
-- =============================================
Create PROCEDURE [dbo].[USP_KIDSLEARN_Delete]
 ( @KIDIDENTITY  VARCHAR(20)  = '' )
AS
BEGIN
 DELETE FROM kidsLearnerMaster WHERE KIDIDENTITY=@KIDIDENTITY
   
END





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 then select ASP.NET Web Application. Enter your project name and click OK.

  

Select MVC,WEB API and click OK.

Web.Config


In web.config file we can find the DefaultConnection Connection string. By default ASP.NET MVC will use this connection string to create all ASP.NET Identity related tables like AspNetUsers, etc. For our application we also need to use database for other page activities instead of using two different databases, one for User details and one for our own functionality. Here I will be using one database where all ASP.NET Identity tables will be created and also we can create our own tables for other page uses. 

Here in connection string change your SQL Server Name, UID and PWD to create and store all user details in one database. 

<connectionStrings>
 <add name="DefaultConnection" connectionString="data source=YOURSERVERNAME;initial catalog= KidsLearnerDB;user id=UID;password=PWD;Integrated Security=True" providerName="System.Data.SqlClient"  />
</connectionStrings>

Create default Role for Admin User

Firstly, create default user role like “Admin” and also we will create a default admin user. We will be creating all default roles and user in “Startup.cs”

OWIN (OPEN WEB Interface for .NET) defines a standard interface between .NET and WEB Server and each OWIN application has a Startup Class where we can specify components.

Reference

In “Startup.cs” file we can find the Configuration method. From this method we will be calling ourcreateRolesandUsers() method to create a default user role and user. We will check for Roles already created or not. If Roles, like Admin, is not created, then we will create a new Role as “Admin” and we will create a default user and set the user role as Admin. We will be using this user as super user where the user can Manage Question from our MVC application. 

public void Configuration(IAppBuilder app)
 {
 ConfigureAuth(app);
 createRolesandUsers();
 }
   
   
 // In this method we will create default User roles and Admin user for login
 private void createRolesandUsers()
 {
 ApplicationDbContext context = new ApplicationDbContext();
   
 var roleManager = new RoleManager<IdentityRole>(new RoleStore<IdentityRole>(context));
 var UserManager = new UserManager<ApplicationUser>(new UserStore<ApplicationUser>(context));
   
 // In Startup iam creating first Admin Role and creating a default Admin User
 if (!roleManager.RoleExists("Admin"))
 {
 // first we create Admin role 
 var role = new Microsoft.AspNet.Identity.EntityFramework.IdentityRole();
 role.Name = "Admin";
 roleManager.Create(role);
 //Here we create a Admin super user who will maintain the website
   
 var user = new ApplicationUser();
 user.UserName = "syedshanumcain@gmail.com";
 user.Email = "syedshanumcain@gmail.com";
 string userPWD = "A@Z200711";
 var chkUser = UserManager.Create(user, userPWD);
 //Add default User to Role Admin
 if (chkUser.Succeeded)
 {
 var result1 = UserManager.AddToRole(user.Id, "Admin");
   
 }
 }
   
 }


When we run our application we can see new default ASP.NET user related tables will be created in our KidsLearnerDB Database.

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,

Select "EF Designer from database" and click Next.

Connect to our database. Click Next to select our Tables and Stored Procedure for Menu management.

Here we can see newly create KidsLearnerMaster table with existing ASP.NET Identity tables and all newly created stored procedures has been selected for performing our KidsLearnerMaster CRUD operations.

Click finish

Procedure to add our Web API Controller

Right-click the Controllers folder, click Add and then click Controller.

Select Web API 2 Controller – Empty, click add and give name for our WEB API controller.

Working with WEBAPI Controller for CRUD

Select Controller and add an Empty Web API 2 Controller. Provide your name to the Web API controller and click OK. Here for my Web API Controller I have given the name “KIDSLEARNAPIController ". 

As we have created Web API controller, we can see our controller has been inherited with ApiController. As we all know Web API is a simple and easy way to build HTTP Services for Browsers and Mobiles.

Web API has the following 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.

Get Method

In our example I have used only a Get method since I am using only a Stored Procedure. We need to create an object for our Entity and write our Get Method to do Select/Insert/Update and Delete operations. 

Select Operation



We use a get method to get all the details of the KidslearnMasters table using an entity object and we return the result as IEnumerable. We use this method in our AngularJS and display the result in an MVC page from the AngularJS controller. Using Ng-Repeat we can bind the details.

Here we can see in the getKIDSLEARNSelect method I have passed the search parameter to the USP_KIDSLEARN_Select ALL Stored Procedure. In the Stored Procedure I used like "%" to return all the records if the search parameter is empty. 


 Next we have one more Select method .This Method will be used to display top 10 random questions to users.


// To select top 10 random results
 [HttpGet]
 public IEnumerable<USP_KIDSLEARN_Select_Result> getKIDSLEARNSelect(string IMAGENAME)
 {
 if (IMAGENAME == null)
 IMAGENAME = "";
 return objapi.USP_KIDSLEARN_Select(IMAGENAME).AsEnumerable();
 }

Insert Operation

The same as select we passed all the parameters to the insert procedure. This insert method will return the result from the database as a record is inserted or not. We will get the result and display it from the AngularJS Controller to MVC application. 

// To insertKIDSLEARN
 [HttpGet]
 public IEnumerable<string> insertKIDSLEARN(string IMAGENAME, string ANSWER, string HINTQUESTION)
 {
 return objapi.USP_KIDSLEARN_Insert(IMAGENAME, ANSWER, HINTQUESTION).AsEnumerable();
 }


Update Operation

The same as Insert we have passed all the parameters to the Update procedure. This Update method will return the result from the database as a record is updated or not. 

//to Update updateKIDSLEARN
 [HttpGet]
 public IEnumerable<string> updateKIDSLEARN(string kidsIdentity, string IMAGENAME, string ANSWER, string HINTQUESTION)
 {
 return objapi.USP_KIDSLEARN_Update(kidsIdentity, IMAGENAME, ANSWER, HINTQUESTION).AsEnumerable();
 }

Delete Operation

The same as Insert we have passed all the parameters to the Delete procedure. This Delete method will return the result from the database as a record is delete or not. 

//to delete KIDSLEARN
 [HttpGet]
 public string deleteKIDSLEARN(string kidsIdentity)
 {
 objapi.USP_KIDSLEARN_Delete(kidsIdentity);
 objapi.SaveChanges();
 return "deleted";
 }

Admin Module:

In admin module .Admin can be logged in and manage all Kids Question details

Creating AngularJS Controller

Firstly, create a folder inside the Scripts folder and we have given the folder name “MyAngular”.

 

 Now add your Angular Controller inside the folder.

Right click the MyAngular folder and click Add and New Item. Select Web and then AngularJS Controller and provide a name for the Controller. I have named my AngularJS Controller “Controller.js”.

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

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.

 Procedure to Create AngularJS Script Files for Menu CRUD 

Modules.js: Here we will add the reference to the AngularJS JavaScript and create an Angular Module named “AngularJs_Module”.

// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="../angular-animate.js" />
/// <reference path="../angular-animate.min.js" />
var app;
(function () {
 app = angular.module("AngularJs_Module", ['ngAnimate']);
})();

Controllers: In AngularJS Controller I have done all the business logic and returned the data from Web API to our MVC HTML page.

1. Variable declarations 







Firstly, we declared all the local variables need to be used. 

app.controller("AngularJs_Controller", function ($scope, $timeout, $rootScope, $window, $http, FileUploadService) {
 $scope.date = new Date();
 $scope.MyName = "shanu";
 $scope.sImage = "";
   
   
 $scope.showKidsAdd = true;
 $scope.addEditKids = false;
 $scope.KidsList = true;
 $scope.showItem = true;
 $scope.userRoleName = $("#txtuserRoleName").val();
 //This variable will be used for Insert/Edit/Delete Kids Learn Question details. $scope.kidsIdentitys = 0;
 $scope.UImage = "";
 $scope.Answer = "";
 $scope.Question = "";
2. Methods

Select Method 


In the select method I have used $http.get to get the details from Web API. In the get method I will provide our API Controller name and method to get the details. 

The final result will be displayed to the MVC HTML page using data-ng-repeat. 

// This method is to get all the kids Learn Details to display for CRUD.
 selectKidsLearnDetails($scope.sImage);
   
   
 function selectKidsLearnDetails(IMAGENAME) {
 $http.get('/api/KidsLearnAPI/getKIDSLEARNSelectALL/', { params: { IMAGENAME: IMAGENAME } }).success(function (data) {
 $scope.KidsLearnData = data;
 $scope.showKidsAdd = true;
 $scope.addEditKids = false;
 $scope.KidsList = true;
 $scope.showItem = true;
   
 if ($scope.KidsLearnData.length > 0) {
 }
 })
 .error(function () {
 $scope.error = "An Error has occurred while loading posts!";
 });
 }
   
 //Search
 $scope.searchKidsLearnDetails = function () {
 selectKidsLearnDetails($scope.sImage);
 }












Insert new Question

In the ADD/Edit Details button click we will make visible the QuestionAdd table details where the Admin user can enter the new Question information. For a new Menu we will make the Menu ID as 0. In the New Menu save button click we will call the save method. 

// New Kids Details Add Details
 $scope.showKidsAddDetails = function () {
 cleardetails();
 $scope.showKidsAdd = true;
 $scope.addEditKids = true;
 $scope.KidsList = true;
 $scope.showItem = true;
 }

In the Save method we will check for the kidsIdentity. If the kidsIdentitys is “0” then it will insert the new question Master. Here we will call the Insert Web API method and if the MenuIdentitys is > 0 then it means to update the Menu record then we will call the Update Web API method.

Image Upload: In Edit and Add new question admin can upload image to our roopt folder and image name will be saved to our database.

$scope.ChechFileValid



This method checks the attached image file is valid or not. If the image file is not valid then display the error message.



$scope.SaveDetail = function () 



In this method pass the image file to the UploadFile method and once the image is uploaded successfully to our root folder the item details will be inserted into database.

fac.UploadFile = function (file) In this method using $http.post we pass our image file to the MVC Controller and our HTTPost method as in the following: 

//Declarationa and Function for Image Upload and Save Data
 //--------------------------------------------
 // Variables
 $scope.Message = "";
 $scope.FileInvalidMessage = "";
 $scope.SelectedFileForUpload = null;
 $scope.FileDescription_TR = "";
 $scope.IsFormSubmitted = false;
 $scope.IsFileValid = false;
 $scope.IsFormValid = false;
   
 //Form Validation
 $scope.$watch("f1.$valid", function (isValid) {
 $scope.IsFormValid = isValid;
 });
   
   
 // THIS IS REQUIRED AS File Control is not supported 2 way binding features of Angular
 // ------------------------------------------------------------------------------------
 //File Validation
 $scope.ChechFileValid = function (file) {
 var isValid = false;
 if ($scope.SelectedFileForUpload != null) {
 if ((file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') && file.size <= (800 * 800)) {
 $scope.FileInvalidMessage = "";
 isValid = true;
 }
 else {
 $scope.FileInvalidMessage = "Only JPEG/PNG/Gif Image can be upload )";
 }
 }
 else {
 $scope.FileInvalidMessage = "Image required!";
 }
 $scope.IsFileValid = isValid;
 };
   
 //File Select event
 $scope.selectFileforUpload = function (file) {
   
 var files = file[0];
 $scope.Imagename = files.name;
 //  alert($scope.Imagename);
 $scope.SelectedFileForUpload = file[0];
   
 }
 //----------------------------------------------------------------------------------------
   
 //Save File
 $scope.saveDetails = function () {
   
 $scope.IsFormSubmitted = true;
   
 $scope.Message = "";
 $scope.ChechFileValid($scope.SelectedFileForUpload);
   
 if ($scope.IsFormValid && $scope.IsFileValid) {
 FileUploadService.UploadFile($scope.SelectedFileForUpload).then(function (d) {
   
 //if the MenuIdentity ID=0 means its new Menu insert here i will call the Web api insert method
 if ($scope.kidsIdentitys == 0) {
   
 $http.get('/api/KidsLearnAPI/insertKIDSLEARN/', { params: { IMAGENAME: $scope.Imagename, ANSWER: $scope.Answer, HINTQUESTION: $scope.Question } }).success(function (data) {
   
 $scope.menuInserted = data;
 alert($scope.menuInserted);
   
   
 cleardetails();
 selectKidsLearnDetails('');
 })
 .error(function () {
 $scope.error = "An Error has occured while loading posts!";
 });
 }
   
   
 else {  // to update to the Menu details
 $http.get('/api/KidsLearnAPI/updateKIDSLEARN/', { params: { kidsIdentity: $scope.kidsIdentitys, IMAGENAME: $scope.Imagename, ANSWER: $scope.Answer, HINTQUESTION: $scope.Question } }).success(function (data) {
 $scope.menuUpdated = data;
 alert($scope.menuUpdated);
   
 cleardetails();
 selectKidsLearnDetails('');
 })
 .error(function () {
 $scope.error = "An Error has occurred while loading posts!";
 });
 }
   
 }, function (e) {
 alert(e);
 });
 }
 else {
 $scope.Message = "All the fields are required.";
 }
   
 };
   
})
   
.factory('FileUploadService', function ($http, $q) {
   
 var fac = {};
 fac.UploadFile = function (file) {
 var formData = new FormData();
 formData.append("file", file);
   
 var defer = $q.defer();
 $http.post("/KidslearnAdmin/UploadFile", formData,
 {
 withCredentials: true,
 headers: { 'Content-Type': undefined },
 transformRequest: angular.identity
 })
 .success(function (d) {
 defer.resolve(d);
 })
 .error(function () {
 defer.reject("File Upload Failed!");
 });
   
 return defer.promise;
   
 }
 return fac;
   
 //---------------------------------------------
 //End of Image Upload and Insert record





Add MVC controller for Admin page:

 We will create new MVC controller named as KidsLearnAdminContrller in this controller first we check for the user role is admin and also authorized user .If the user is not logged in and not a Admin user then we will redirect to login page.If the user is logged in then we display the Admin Question Management page. 

// GET: KidslearnAdmin
 public string RoleName { get; set; }
 // GET: Users
 public Boolean isAdminUser()
 {
 if (User.Identity.IsAuthenticated)
 {
 var user = User.Identity;
 ApplicationDbContext context = new ApplicationDbContext();
 var UserManager = new UserManager<ApplicationUser>(new UserStore<ApplicationUser>(context));
 var s = UserManager.GetRoles(user.GetUserId());
 RoleName = s[0].ToString();
 if (RoleName == "Admin")
 {
 return true;
 }
 else
 {
 return false;
 }
 }
 return false;
 }
 // GET: Menu
 public ActionResult Index()
 {
   
 if (User.Identity.IsAuthenticated)
 {
 var user = User.Identity;
 ViewBag.Name = user.Name;
 //  ApplicationDbContext context = new ApplicationDbContext();
 //  var UserManager = new UserManager<ApplicationUser>(new UserStore<ApplicationUser>(context));
 //var s=  UserManager.GetRoles(user.GetUserId());
 ViewBag.displayMenu = "No";
   
 if (isAdminUser())
 {
 ViewBag.UserRole = RoleName;
 ViewBag.displayMenu = "YES";
 return View();
 }
 else
 {
 return RedirectToAction("Index", "Home");
 }
   
 }
 else
 {
 return RedirectToAction("Index", "Home");
   
 ViewBag.Name = "Not Logged IN";
 }
 return RedirectToAction("Index", "Home");
   
 }

In this controller we use the UploadFile method to upload the image to our root folder.

Note $http.post(“”) we need to provide our MVC Controller name and our HTTPost method name, where we upload the image to our root folder. The following is the code to upload an image to our MVC Controller. 

[HttpPost] 
 public JsonResult UploadFile() 
 
 string Message, fileName; 
 Message = fileName = string.Empty; 
 bool flag = false
 if (Request.Files != null
 
 var file = Request.Files[0]; 
 fileName = file.FileName; 
 try 
 
 file.SaveAs(Path.Combine(Server.MapPath("~/Images"), fileName)); 
 Message = "File uploaded"
 flag = true
 
 catch (Exception) 
 
 Message = "File upload failed! Please try again"
 
  
 
 return new JsonResult { Data = new { Message = Message, Status = flag } }; 
 }




























User Module:

Same like admin we will add new AngularJS Controller and we give the AngularJS controller name as KidsContrller for user module and we declare all local variables to be used.

 

/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="../angular-animate.js" />
/// <reference path="../angular-animate.min.js" />
var app;
   
(function () {
 app = angular.module("AngularJs_ImageModule", ['ngAnimate']);
})();
   
   
app.controller("AngularJs_ImageController", function ($scope, $timeout, $rootScope, $window, $http) {
   
 //Global Variables
 $scope.date = new Date();
 $scope.MyName = "Shanu";
 $scope.usrName = "";
 $scope.Images;
 $scope.txtAnswer = "";
   
 //Game variable declared
 //This variable has been declared to display the Question Number,User Total Points on each questions,
 //Each question Answer Correct Word total character Count for example from the Images display the correct answer is Fire then i will display 4 as total Word Count.
 //rowCount is used to display the Question one by one.
 $scope.questionCount = 1;
 $scope.answerCount = 1;
 $scope.totalPoints = 0
 $scope.wordCount = 0;
 $scope.rowCount = 0;
   
 //Game Detail Display Variables
 $scope.Image1 = "";
 $scope.ImageAnswer = "won.png";
 $scope.Answers = "";
 $scope.HintQuestion = "";
 $scope.Resuts = "";
 //  --
   
 //Game Hidden Table row display
 $scope.showGameStart = true;
 $scope.showGame = false;
 $scope.showresult = false;
 //Sound file for play sounds
 $scope.mp3 = "~/Sounds/Key.wav"


Game Start Function




By default we will display how to play the game and the rules to play the game and the instructions to start the game. The user can enter their name to start the game. The user cannot start the game without entering their name. 

 In the Start game button click I call the AngularJs method startGame to check whether the user has entered their name. If the user has not entered their name I will ask to enter the name to start the game. If the user has entered their name then I will call the function to display the first question for the user. 

$scope.startGame = function () {
 $scope.playKeySound();
 if ($scope.usrName == '') {
 alert("Enter Your Name to start the game !");
 $scope.showGameStart = true;
 $scope.showGame = false;
 $scope.showresult = false;
 }
 else {
 $scope.questionCount = 1;
 $scope.totalPoints = 0;
 $scope.wordCount = 0;
 $scope.rowCount = 0;
 $scope.answerCount = 1;
 selectGameDetails('');
 $scope.showGameStart = false;
 $scope.showGame = true;
 $scope.showresult = false;
 }
 }

Play Sound:

 Here I have used windows default sound for each button click and for correct and wrong answers. In our MVC page we add HTML5 Audio Element tag for playing the sounds.
<tr ng-show="showSounds">
 <td>
 <audio id="audio1" >
 <source src="@Url.Content("~/Sounds/Key.wav")"></source>
 Your browser isn't invited for super fun audio time.
 </audio>
 <audio id="audioOK">
 <source src="@Url.Content("~/Sounds/Alarm07Ok.wav")"></source>
 Your browser isn't invited for super fun audio time.
 </audio>
 <audio id="audioNG">
 <source src="@Url.Content("~/Sounds/Alarm06NOK.wav")"></source>
 Your browser isn't invited for super fun audio time.
 </audio>
   
 </td>
 </tr>
In our AngularJS Controller in each button click, correct answer and wrong Answer we call the each method to play the sounds. 


$scope.playKeySound = function () {
 var audio2 = document.getElementById("audio1");
 audio2.volume = 1;
 audio2.play();
 }
   
 $scope.playOKSound = function () {
 var audio2 = document.getElementById("audioOK");
 audio2.volume = 1;
 audio2.play();
 }
   
 $scope.playNOKSound = function () {
 var audio2 = document.getElementById("audioNG");
 audio2.volume = 1;
 audio2.play();
 }



selectGameDetails() To display the Each question.

 When the user clicks on the Start game button we display questions number 1, the total points as 0 and using the $http.get('/api/KidsLearnAPI/getKIDSLEARNSelect/', { params: { IMAGENAME: IMAGENAME } }) we will get 10 random questions from the database and will store the result data to$scope.Images. For the first question the rowcount will be 0, I will display the first question's information with a Hint Answer. 

//get all image Details
 function selectGameDetails(IMAGENAME) {
 $http.get('/api/KidsLearnAPI/getKIDSLEARNSelect/', { params: { IMAGENAME: IMAGENAME } }).success(function (data) {
 $scope.Images = data;
 if ($scope.Images.length > 0) {
 $scope.Image1 = $scope.Images[$scope.rowCount].IMAGENAME;
 $scope.Answers = $scope.Images[$scope.rowCount].ANSWER;
 $scope.HintQuestion = $scope.Images[$scope.rowCount].HINTQUESTION;
 $scope.wordCount = $scope.Answers.length;
 }
 })
 .error(function () {
 $scope.error = "An Error has occured while loading posts!";
   
 });
 }

Next Question button Click


In the next button we will check for each answer result entered by the user.

Correct Answer: We will check the user entered answer with the database result answer. If both answers are correct then we will display the result to answer and increment the user total points with 20.

 

Wrong Answer: We will check the user entered answer with the database result answer. If both answers are incorrect then we will display the result to answer and decrement the user total points with 10 (-10).

Final Result, the User Won/Lose the Game 

When the user has answered all the 10 questions we will check for the result of Total Points for the user and if the points are less than 200 then we will display the message to the user that they have lost the game. 

 Here is the AngularJs code to check the user result and display the message.

// to find the Answer
 $scope.findAnswer = function () {
 if ($scope.txtAnswer == "") {
 alert("Enter the Answer");
 return;
 }
 if ($scope.txtAnswer.toLowerCase() == $scope.Answers.toLowerCase()) {
 $scope.playOKSound();
 alert("Wow :) You have enter the correct answer and you have got 20 Points for this Answer")
 if ($scope.answerCount <= 9) {
 $scope.answerCount = $scope.answerCount + 1;
 }
 $scope.totalPoints = $scope.totalPoints + 20;
 }
   
 else {
 $scope.playNOKSound();
 if ($scope.answerCount > 1)
 {
 $scope.answerCount = $scope.answerCount - 1;
 }
 alert("Sorry :( You have enter the wrong answer and you have got -10 points")
 $scope.totalPoints = $scope.totalPoints - 10;
 }
   
 $scope.txtAnswer = "";
 if ($scope.questionCount == 10) {
 if ($scope.totalPoints >= 200) {
 $scope.playOKSound();
 $scope.Resuts = "Wow :) You have won the Game.Good Job " + $scope.usrName;
 alert($scope.Resuts)
 $scope.ImageAnswer = "won.png";
 }
 else {
 $scope.Resuts = "Sorry " + $scope.usrName + " You lose the game :( .Your Total points are " + $scope.totalPoints + " out of 100 points"
 alert($scope.Resuts);
 $scope.ImageAnswer = "lose.png";
 }
   
 $scope.showGameStart = false;
 $scope.showGame = false;
 $scope.showresult = true;
 return;
 }
 else {
   
 $scope.questionCount = $scope.questionCount + 1;
   
 $scope.wordCount = 0;
 $scope.rowCount = $scope.rowCount + 1;
   
 $scope.Image1 = $scope.Images[$scope.rowCount].image1;
 $scope.Image1 = $scope.Images[$scope.rowCount].IMAGENAME;
 $scope.Answers = $scope.Images[$scope.rowCount].ANSWER;
 $scope.HintQuestion = $scope.Images[$scope.rowCount].HINTQUESTION;
   
 $scope.wordCount = $scope.Answers.length;
 }
   
 }

More Information

Firstly, create a sample KidsLearnerDB Database in your SQL Server. In the Web.Config file change the DefaultConnection connection string with your SQL Server Connections. In Startup.cs file I have created default Admin user with UserName "shanu" and password "A@Z200711." This UserName and password will be used to login as Admin user. You can change this user name and password as you like. For security reasons after logging in as Admin you can change the Admin user password as you like. 

You can download the Source Code from this link Download Source Code