برگزاری آزمون توسط angularjs

برگزاری آزمون توسط angularjs ,این مقاله روش بسیار ساده ای را به شما نشان می دهد که فقط با چند خط کد بتوانید quiz application خود را در angularJs ایجاد نمایید.

این برنامه کوئیز، سوالات را در قالب json می گیرد. بنابراین به سادگی می توانیم json را که فرمت آن از پیش تعریف شده است از سرور ارسال کنیم و این برنامه کوئیز را سمت کاربر اجرا خواهد کرد.

همچنین این کوئیز قسمت نتیجه را نمایش داده و مرور می کند. اگر بخواهید نتیجه را فوراً اعلام نمایید، می توانید json دیگری را که پاسخ ها در آن می باشد فراخوانی کرده و به سادگی ارزیابی کنید و نتیجه را نمایش دهید.

همچنین به جای آن، اگر بخواهید فقط پاسخ سوالات را در سرور ثبت کنید می توانید در متد onSubmit فایل quizCtrl.js این کار را انجام دهید.

برگزاری آزمون توسط angularjs

در این مقاله فرض بر این است که شما اطلاعات اولیه در زمینه AngularJs، bootstrap و کمی هم css دارید.

در این برنامه از jQuery استفاده نخواهیم کرد. البته اگر بخواهید امکانات بیشتری با استفاده از jQuery یا کتابخانه های دیگر جاوا اسکریپت پیاده سازی کنید، بدون هیچ مشکلی می توانید این کار را انجام دهید.

نکته مهم: این برنامه ممکن است به طور مستقیم با اجرا کردن index.html کار نکند.

بنابراین لازم است که به طور دستی آن را روی یک وب سرور قرار داده و با ابزارهایی مانند ویژوال استودیو اجرا بگیریم.

یکی از روش های ساده اجرا گرفتن :

index.html را در ویژوال استودیو باز کرده، سپس روی صفحه راست کلیک کرده و View in Browser را انتخاب می کنیم. ویژوال استودیو به طور اتوماتیک یک وب سایت برای شما ایجاد کرده و برنامه را اجرا می کند.

 برگزاری آزمون توسط angularjs

استفاده از کد:

استفاده از کد بسیار ساده است. فقط json موردنیاز را به برنامه کوئیز می دهیم و این برنامه، کوئیز را اجرا می کند.

فرمت json باید چیزی شبیه به فرمت زیر باشد:

// aspnet.js

{

   quiz: {

       Id: 1,

       name:Asp.Net Quiz,

       description:Asp.Net Quiz (contains webform, mvc, web API, etc.)

    },

   questions: [{

       Id: 1010,

       Name:ASP.NET webform separates the HTML output from program logic using a feature named as,

       QuestionTypeId: 1,

       Options: [

            {Id: 1055,QuestionId: 1010,Name:Exception,IsAnswer: false },

            {Id: 1056,QuestionId: 1010,Name:Code-behind,IsAnswer: true },

            {Id: 1057,QuestionId: 1010,Name:Code-front,IsAnswer: false },

            {Id: 1058,QuestionId: 1010,Name:None of the above,IsAnswer: false }],

       QuestionType: {Id: 1,Name:Multiple Choice,IsActive: true }

    },

    {

       Id: 1011,

       Name:The feature in ASP.NET 2.0 that is used to fire a normal postback to a different page in the application is called,

       QuestionTypeId: 1,

       Options: [

            {Id: 1055,QuestionId: 1010,Name:Theme,IsAnswer: false },

            {Id: 1057,QuestionId: 1010,Name:Code-front,IsAnswer: false },

            {Id: 1056,QuestionId: 1010,Name:Cross Page Posting,IsAnswer: true },

            {Id: 1058,QuestionId: 1010,Name:None of the above,IsAnswer: false }],

       QuestionType: {Id: 1,Name:Multiple Choice,IsActive: true }

    },

... [For full code, please see the sample attached.]

ممکن است که شما نخواهید ویژگی IsAnswer را در گزینه ها بیاورید چرا که در کوئیزهایی که امنیت مهم است، نا امن می باشد.

در این مورد، به سادگی می توان سوالات را با IsAnswer ارسال کرد.

زمانی که کاربر کوئیز خود را ثبت می کند، در متد onSubmit در فایل quizCtrl.js می توانیم سوالات را به همراه جواب ها فراخوانی کرده و آن ها را ارزیابی می کنیم.

درباره Quiz Application

به طور عمده، این برنامه سه جز دارد:

  • کوئیز
  • مرور
  • نتیجه

برای سادگی، هر سه View را در یک فایل قرار دادیم. اگر بخواهید این برنامه را با مقیاس بزرگتری انجام دهید و آن را گسترش دهید، می توانید به راحتی این Viewها را جدا کنید.

علاوه بر آن، quizCtrl.js به عنوان Controller همه Viewها استفاده می شود، همچنین style.css نیز استایل های css را روی برنامه اعمال می کند. و علاوه بر این ها AngularJs و bootstrap نیز به ترتیب برای data-binding و styling استفاده می شوند.

Controller:

برنامه بخش کوچکی از اسکریپت دارد که توسط Controller مدیریت می شود: quizCtrl.js. اول از همه، Controller با استفاده از متد  $scope.loadQuiz(‘data/aspnet.js’) سوالات را بارگذاری می کند.

همان طور که گفته شد، سوالات باید در یک json با فرمت از پیش تعیین شده، در aspnet.js یا هر فایل js دیگری قرار بگیرد.

زمانی که سوالات بارگذاری شدند، کاربر می تواند به سوالات جواب دهد و رویدادها توسط همان Controller بررسی خواهد شد.

درنهایت، زمانی که کاربر کوئیز را ثبت می کند، شما پاسخ ها را به فرمت json در سرور ثبت می کنید. یا سوالات و پاسخ ها را با هم بارگذاری کرده و پاسخ های کاربر را برای نمایش فوری نتیجه، ارزیابی کنید.

در این مثال ما می خواهیم روش دوم را پیاده سازی کنیم، اما روش اول هم نسبتا ساده است.

فایل quizCtrl.js به شکل زیر خواهد بود:

// quizCtrl.js
...
    $scope.loadQuiz = function (file) {
        $http.get(file)
         .then(function (res) {
             $scope.quiz = res.data.quiz;
             $scope.questions = res.data.questions;
             $scope.totalItems = $scope.questions.length;
             $scope.currentPage = 1;

             $scope.$watch('currentPage + itemsPerPage', function () {
                 var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
                   end = begin + $scope.itemsPerPage;

                 $scope.filteredQuestions = $scope.questions.slice(begin, end);
             });
         });
    }
    $scope.loadQuiz('data/aspnet.js');

    $scope.isAnswered = function (index) {
        var answered = 'Not Answered';
        $scope.questions[index].Options.forEach(function (element, index, array) {
            if (element.Selected == true) {
                answered = 'Answered';
                return false;
            }
        });
        return answered;
    };

    $scope.isCorrect = function (question) {
        var result = 'correct';
        question.Options.forEach(function (option, index, array) {
            if ($scope.toBool(option.Selected) != option.IsAnswer) {
                result = 'wrong';
                return false;
            }
        });
        return result;
    };
... 

ساختار کوئیز:

ساختار کوئیز یک object اختیاری است که باید در فایل <quiz>.js قرار بگیرد. بخش config امکان سفارشی سازی کوئیز را به ما می دهد. برنامه کوئیز، بخش تنظیمات را می خواند و زمان بارگذاری کوئیز روی آن اعمال می کند. این تنظیمات معمولا شامل: بهم ریختن ترتیب سوالات (Shffle)، نمایش/عدم نمایش شمارنده صفحه، امکان برگشت به صفحه قبل، رفتن به سوالات بعد به طور اتوماتیک می باشد. جزئیات این ساختار در بخش “امکانات کوئیز” توضیح داده شده است.

ساختار کوئیز به شکل زیر می باشد:


// csharp.js
...
    config:{
        shuffleQuestions: true,
        showPager: false,
        allowBack: true,
        autoMove: true
    }
... 

سرویس های استفاده شده:

باز هم برای سادگی، فقط از یک سرویس در angularJs Controller استفاده کردیم: $http.

این سرویس برای بازیابی فایل Json کوئیز استفاده می شود.

Quiz View:

Quiz View شامل سوالات کوئیز واقعی، دکمه “بعدی” و “قبلی”، صفحه بندی و موارد مرتبط می باشد. در اینجا ما فرمت نمایش یک سوال در هر صفحه را انتخاب کردیم، اما اگر بخواهید می توانید با تغییر اندازه صفحه مطابق آنچه می خواهید تعداد سوال بیشتری در هر صفحه نمایش دهید.

برای دکمه ها و صفحه بندی UI از bootstrap استفاده شده است. UI مربوط به سوالات و گزینه ها در style.css نوشته شده است.

فرمت HTML مربوط به View به شکل زیر خواهد بود:

// quiz.html
       div ng-repeat=question in filteredQuestions
           div class=label label-warningQuestion {{currentPage}} of {{totalItems}}./div
           div class=question
               h2{{currentPage}}. {{question.Name}}/h2
               div class=options
                   div ng-repeat=Option in question.Options
                       label for={{Option.Id}} ng-click=onSelect(Option);
                           input id={{Option.Id}} type=checkbox ng-model=Option.Selected /
                            {{Option.Name}}
                       /label
                   /div
               /div
           /div
       /div

اگر angularJs بلد باشید، فهم این قسمت برای شما بسیار ساده خواهد بود. برای نمایش سوالات و گزینه ها از ng-repeat استفاده شده است.

View مربوط به  مرور و نتیجه نیز به همین ترتیب پیاده سازی می شوند. تصاویر زیر نمایی از این دو View را نمایش می دهد.

 آموزش AngularJS

 

angularjs در ASP.NET

استایل بندی:

برای theme و استایل بندی سفارشی از bootstrap استفاده می شود. برای استایل بندی بیشتر طبق آنچه که برنامه نیاز دارد، کلاس های css در style.css اضافه می شوند.

اگر می خواهید ظاهر برنامه را تغییر دهید، به سادگی با تغییر کلاس css مربوطه در style.css می توانید این کار را انجام دهید.

تمام سعی ما بر این بوده که این برنامه ریسپانسیو باشد، بنابراین به سادگی در گوشی های همراه و تبلت ها به خوبی کار می کند.

امکانات کوئیز:

این بخش به یک مستندسازی مختصر درباره اقلامی که برای امکانات کوئیز استفاده شده است، می پردازد.

بهم ریختن ترتیب سوالات:

ویژگی shuffleQuesttions در بخش config مشخص می کند که آیا ترتیب سوالات قبل از نمایش تغییر کند یا خیر.

اگر پاسخ بله بود، سوالات به طور تصادفی نمایش داده می شوند. به طور پیش فرض این مقدار false است.

نمایش شمارنده صفحه:

ویژگی showPaper در بخش config مشخص می کند که عنصر شمارنده صفحه در کوئیز نشان داده شود یا خیر.

اگر پاسخ  false بود، شمارنده نمایش داده نخواهد شد. به طور پیش فرض مقدار آن True است.

Auto Move:

ویژگی auto move در بخش config نشان می دهد که آیا زمانی که سوال پاسخ داده شد، به طور اتوماتیک به سوال بعدی برود یا خیر.

اگر True بود، دیگر نیازی نیست که برای رفتن به سوال بعد روی دکمه “بعدی” کلیک کنیم. به طور پیش فرض مقدار آن false است.

بارگذاری داینامیک کوئیز:

در تست های آزمایشی، ممکن است کاربر بخواهد کوئیز را به طور داینامیک تغییر دهد.

برای این کار، فقط لازم است که متد loadQuiz را فراخوانی کرده و آدرس کوئیز جدید را ارسال کنید.

سایر امکانات:

امکانات دیگری نیز می توان به این برنامه اضافه کرد که در ادامه معرفی می کنیم:

گزینه های کوئیز: 

در بسیاری از موارد ما نیاز داریم که سوالات و گزینه ها را به طور تصادفی نمایش دهیم، یا برای سوالات مختلف امتیاز متفاوتی در نظر بگیریم.

برای این کار می توانیم، فایل json کوئیز را تغییر دهیم.

نوع سوال:

در حال حاضر، این برنامه فقط سوالات چند گزینه ای را پشتیبانی می کند.

اما در بسیاری از موارد ما نیاز به سوالات درست-نادرست، سوالاتی با امکان انتخاب چندین گزینه داریم.

تایمر:

تایمر گزینه مهم دیگری است که هر تستی به آن نیاز دارد.

Timer/Stopwatch نیز به عنوان عنصر قابل تنظیم دیگری می تواند به کوئیز اضافه شود.

ایجاد مخزن سوالات:

در برخی موارد، شما می خواهید مخزنی از سوالات به صورت یک json فراهم کنید و برنامه کوئیز هر بار n سوال را به طور تصادفی برای کوئیز انتخاب کند.

به همین ترتیب می توان امکانات دیگری نیز به این برنامه اضافه نمود.

جزئیات فایل

زبان پروژه : Javascript & AngolarJS
حجم فایل پیوست : 500 KB

دانلود فایل

دانلود با لینک مستقیم
پسورد فایل : www.mspsoft.com
فاطمه زکایی

فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.