Developers

Step 1: Create a Quiz

Option 1) To create a new quiz, copy a template folder from /Views/Quiz/Templates to the /Views/Quiz directory and rename it. The name of your new directory is the unique identifier of your quiz.

Option 2) Use the create a quiz feature by clicking on one of the templates on the home page, and then specifying the quiz name and number of questions. The website will copy perform all of the steps in Option 1 for you. You will however have to use the "show all files" feature in Visual Studio to include the new quiz folder in your Visual Studio project.

Take a moment to configure the quiz settings in the quiz.json file:

  1. Set the value of ViewBag.QuizTitle to the title of your quiz.
  2. The other values should be fine as they are, but feel free to customize them.

The welcome message and instructions can be placed in Index.cshtml.

Step 2: Create a Question (skip if you chose option 1 from step 1)

Copy the Q.cshtml file from the Questions sub-directory of your new directory into the same directory, and rename it to Q1.cshtml.

Q1.cshtml contains the question and answers for question #1 of your quiz.

Step 3: Edit the Question

Edit the contents of the Q1.cshtml file.

  1. If you are working on a PACFOSS quiz, set the ViewBag.ModuleNumber and ViewBag.ModuleTitle values to match the module that corresponds to the question.
  2. Add the markup for the question to the @section question. This section can contain any markup, including images, videos or audio.
  3. Edit the markup for each answer in the Html.BeginAnswer(correct: true or false) sections.
  4. You can use Html.AnswerControl() to generate the radio button, Html.AnswerLetter() to display the answer's letter (A, B, C...), or Html.AnswerNumber() to display the answer's number (1, 2, 3...).
  5. The Html.Retroaction() will render the default retroaction based on the partial views in /Views/Shared/Templates. If you would rather customize the retroaction, you can use the using(Html.BeginRetroaction()) { custom markup } construct instead.
  6. You have complete control over the markup that is generated for the questions and answers, and no server-side programming or data entry is required. You can run the solution and view your changes in real time.
  7. You can add as many answers as are required per question.

Step n: Continue...

Repeat steps 2 and 3 until you are done. Feel free to run the solution and view your quiz at any time during your development process.

Remember that you can edit your views, CSS files and JavaScript files while the solution is running. Simply refresh your browser when the you've saved your changes in Visual Studio. In fact, changes to the CSS files are reflected immediately in your browser while the solution is running (only tested in IE 11+).

Referencing images, CSS files, JavaScript files, etc.

Ensure that any custom files for your quiz are stored in the Content/Quiz/quiz-id for your quiz.

To reference these files, you can use the syntax ~/Content/Quiz/quiz-id/filename.ext for attributes such as href or src, or the helper method @Html.Content("filename.ext") (the second option is better in case you rename your quiz!)

Note that @Html.Content() is not the same as @Url.Content(), the later of which requires a full virtual URL (e.g.: ~/Content/Quiz/quiz-id/filename.ext).

Advanced Development

The markup for the quizes are fully customizable, as long as you follow these guidelines:

  1. Ensure that your questions are nested within a using(Html.BeginForm()) and a using(Html.BeginQuestion()) construct. Also note that the Html.Hidden() statements are required.
  2. Ensure that your answers are wrapped in a using(Html.BeginAnswer()) construct.
  3. Always use Html.AnswerControl() to render the input controls for your questions. Future versions of this framework will support other types of questions, such as text-box anwsers, multi-select answers, etc.
  4. Always use Html.Retroaction() or the using(Html.BeginRetroaction()){...} for your retroactions. The retroactions are only rendered to the client when the corresponding answer is selected.

Datastore

The quiz attempt is currently saved in the session state. Everytime you run the solution, you will be starting over. If the solution is hosted on a web server, the session will expire every time that the solution is deployed or after a period of inactivity.

Once the data-access layer is implemented, the results will be saved in a database automatically. You will not be required to make any changes to your quiz in order to have save and restore functionality.

However, if changes are made to your quiz which would invalidate a previous incomplete attempt at the quiz, the user will have to restart. Changes that would prompt a restart consists of changing the number of questions, the number of answers for a question, or the position of the correct answer in a question.

You can also force the invalidation of incomplete attempts at your quiz by incrementing the value of ViewBag.QuizVersion in Questions/_Layout.cshtml before publishing to production.

Back to List of Quizes