Show bootstrap progress percentage on RadioButton selection using AngularJS in ASP.Net MVC

mahesh213
 
on Dec 13, 2020 11:48 PM
Sample_452626.zip
451 Views

Hi,

Display percentage progress bar on RadioButton selection using AngularJS in ASP.Net MVC

In above url display progress bar percentage not working properly

Issue is that if i have clicked one radio button every time it's increasing percentage

Ex: initially i have clicked question1 at that it's increasing percentage that's ok but issue that if i am trying to re click on question1 again it's increasing per one question increase percentage one time only

Could you please help me

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Dec 14, 2020 03:50 AM

Hi mahesh213,

Refer below example.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetData()
    {
        List<Question> questions = new List<Question>();
        questions.Add(new Question { QId = 1, QName = "question#1" });
        questions.Add(new Question { QId = 2, QName = "question#2" });
        questions.Add(new Question { QId = 3, QName = "question#3" });

        List<QuestionOptions> questionOptions = new List<QuestionOptions>();
        questionOptions.Add(new QuestionOptions { QId = 1, QopId = 1, Options = "answer#1" });
        questionOptions.Add(new QuestionOptions { QId = 2, QopId = 1, Options = "answer#2" });
        questionOptions.Add(new QuestionOptions { QId = 3, QopId = 1, Options = "answer#3" });
        questionOptions.Add(new QuestionOptions { QId = 4, QopId = 2, Options = "answer#4" });
        questionOptions.Add(new QuestionOptions { QId = 5, QopId = 2, Options = "answer#5" });
        questionOptions.Add(new QuestionOptions { QId = 6, QopId = 2, Options = "answer#6" });
        questionOptions.Add(new QuestionOptions { QId = 7, QopId = 3, Options = "answer#7" });
        questionOptions.Add(new QuestionOptions { QId = 8, QopId = 3, Options = "answer#8" });
        questionOptions.Add(new QuestionOptions { QId = 9, QopId = 3, Options = "answer#9" });
        List<QuizModel> CO = new List<QuizModel>();

        var cust = questions.OrderBy(a => a.QId).ToList();
        foreach (var i in cust)
        {
            var orders = questionOptions.Where(a => a.QopId.Equals(i.QId)).OrderBy(a => a.QopId).ToList();
            CO.Add(new QuizModel
            {
                Questions = i,
                Questionoptions = orders
            });
        }

        return new JsonResult { Data = CO, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

    public class Question
    {
        public int QId { get; set; }
        public string QName { get; set; }
    }

    public class QuestionOptions
    {
        public int QopId { get; set; }
        public int QId { get; set; }
        public string Options { get; set; }
    }

    public class QuizModel
    {
        public Question Questions { get; set; }
        public List<QuestionOptions> Questionoptions { get; set; }
    }
}

View

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
<script type="text/javascript">
    var app = angular.module('surveyApp', ['angularUtils.directives.dirPagination']);
    app.controller('surveyCtrl', function ($scope, $http) {
        GetEmployees();
        function GetEmployees() {
            $scope.questionSet = [];
            $http({
                method: 'Get',
                url: 'Home/GetData'
            }).then(function (result) {
                $scope.questionSet = result.data;
            }, function (error) {
            })
        }
        $scope.Percentage = 0;
        $scope.Select = function () {
            $scope.Answered = 0;
            var ele = document.getElementsByName('gender');
            for (i = 0; i < ele.length; i++) {
                if (ele[i].checked) {
                    $scope.Answered = $scope.Answered + 1;
                }
            }
            $scope.Answered = $scope.Answered + 1;
            $scope.Percentage = Math.round(parseInt(100) - ((parseInt($scope.questionSet.length - $scope.Answered)
                                / parseInt($scope.questionSet.length)) * parseInt(100)));
        }
    });
</script>
<div class="container" ng-app="surveyApp" ng-controller="surveyCtrl">
    <div dir-paginate="customer in questionSet|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
        {{$index+1}}.{{customer.Questions.QName}}
        <form action="">
        <div ng-repeat="options in customer.Questionoptions" style="display: inline;">
            <input type="radio" name="gender" ng-model="question.random" ng-value="options.Options"
                ng-click="Select()">
            {{options.Options}}
        </div>
        </form>
    </div>
    <hr />
    <div ng-style="{'width' : '100%','background-color':'#E9E9E9' }">
        <div ng-style="{'width' : Percentage+'%','background-color':'#337AB7','text-align': 'center' }">
            <span style="color: White;">{{Percentage}}%</span>
        </div>
    </div>
</div>

Screenshot