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