Create a quiz with Microsoft Lists
Anand • 2023-04-28
Microsoft Lists is a powerful and flexible low code platform that enables users to track and manage information with ease. With its simple interface and robust features, it’s no wonder that Microsoft Lists is quickly becoming one of the most popular tools for application development.
In this blog post, we’ll be exploring how to create a quiz with Microsoft Lists using JSON formatting. This sample provides a step-by-step guide to creating a quiz with multiple choice questions, complete with visual feedback to users when making answer choices.
The quiz we’ll be creating is a fitting example of the versatility of Microsoft Lists. With just a few clicks and some simple JSON formatting, you’ll be able to create a functional quiz that provides a professional look and feel. The tile view and custom card props give the quiz a polished look, making it an ideal solution for educational and training purposes.
To get started, you’ll need to have a basic understanding of JSON formatting. JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy to read and write. It’s the perfect language for creating custom solutions with Microsoft Lists.
Once you’ve got a handle on JSON formatting, you’ll be able to create your quiz with ease. You can use the tile view to display the questions and answer choices, and the custom card props to provide visual feedback to users when making answer choices.
Here is how you can set this up for your teams using SharePoint lists.
In your SharePoint teamsite, create a new list with the following fields.
|Type|Internal Name|Required|Notes
| — -| — -|: — -:|
|Single line of text|Title|Yes|Quiz question
|Single line of text|Answer|Yes|Quiz question answer
|Multi lines of text|Justification|Yes|
|Single line of text|Choice1|Yes|Quiz answer choice 1
|Single line of text|Choice1|Yes|Quiz answer choice 2
|Single line of text|Choice1|Yes|Quiz answer choice 3
|Single line of text|Choice1|Yes|Quiz answer choice 4
|Hyperlink|MoreInfo|No|
Create a new view and choose the Gallery layout. Format the view using the below JSON code and save it. Adapt the code to your needs, for example if you do not need some fields, just remove them.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"width": 315,
"height": 415,
"padding": 12,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-row-listPadding"
},
"style": {
"display": "flex",
"flex-direction": "column",
"align-items": "flex-start",
"width": "100%",
"border": "1px solid #eee",
"box-shadow": "0 2px 4px rgba(0, 0, 0, 0.1)",
"padding": "16px",
"border-radius": "12px",
"background-color": "#242424",
"height": "415px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row",
"align-items": "flex-start",
"margin-bottom": "10px",
"margin-top": "16px"
},
"children": [
{
"elmType": "div",
"style": {},
"children": [
{
"elmType": "button",
"txtContent": "[$ID]",
"style": {
"padding": "2px",
"background-color": "#242424",
"color": "white",
"width": "25px",
"height": "25px",
"border-style": "solid",
"border-color": "#0082f0",
"border-radius": "50%"
}
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"align-items": "flex-start",
"margin-left": "8px"
},
"children": [
{
"elmType": "div",
"txtContent": "[$Title]",
"style": {
"color": "white",
"font-weight": "bold",
"font-size": "18px",
"margin-bottom": "8px"
}
}
]
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"children": [
{
"elmType": "button",
"style": {
"height": "auto",
"margin-left": "10px",
"background-color": "transparent",
"border-radius": "4px",
"border-color": "#0082f0",
"display": "=if([$Choice1] == '', 'none', 'span')",
"text-align": "left",
"padding": "8px"
},
"txtContent": "[$Choice1]",
"attributes": {
"class": "sp-row-button ms-borderColor-blue sp-row-button ms-bgColor-purpleDark--hover ms-fontWeight-semibold ms-fontColor-white"
},
"customCardProps": {
"openOnEvent": "click",
"directionalHint": "rightCenter",
"isBeakVisible": true,
"beakStyle": {
"backgroundColor": "#3c3c3c"
},
"formatter": {
"elmType": "div",
"style": {
"color": "white",
"background-color": "#3c3c3c",
"border-color": "=if([$Choice1] == [$Answer], 'green', 'red')",
"border-style": "solid",
"border-width": "0.8px",
"width": "300px",
"height": "auto",
"padding": "10px"
},
"txtContent": "=if([$Choice1] == [$Answer], 'Correct: ' + [$Justification], 'Incorrect: ' + '[$Justification]')"
}
}
}
]
},
{
"elmType": "span",
"children": [
{
"elmType": "button",
"style": {
"height": "auto",
"margin-left": "10px",
"background-color": "transparent",
"border-radius": "4px",
"border-color": "#0082f0",
"display": "=if([$Choice2] == '', 'none', 'span')",
"text-align": "left",
"padding": "8px"
},
"txtContent": "[$Choice2]",
"attributes": {
"class": "sp-row-button ms-borderColor-blue sp-row-button ms-bgColor-purpleDark--hover ms-fontWeight-semibold ms-fontColor-white"
},
"customCardProps": {
"openOnEvent": "click",
"directionalHint": "rightCenter",
"isBeakVisible": true,
"beakStyle": {
"backgroundColor": "#3c3c3c"
},
"formatter": {
"elmType": "div",
"style": {
"color": "white",
"background-color": "#3c3c3c",
"border-color": "=if([$Choice2] == [$Answer], 'green', 'red')",
"border-style": "solid",
"border-width": "0.8px",
"width": "300px",
"height": "auto",
"padding": "10px"
},
"txtContent": "=if([$Choice2] == [$Answer], 'Correct: ' + [$Justification], 'Incorrect: ' + '[$Justification]')"
}
}
}
]
},
{
"elmType": "span",
"children": [
{
"elmType": "button",
"style": {
"height": "auto",
"margin-left": "10px",
"background-color": "transparent",
"border-radius": "4px",
"border-color": "#0082f0",
"display": "=if([$Choice3] == '', 'none', 'span')",
"text-align": "left",
"padding": "8px"
},
"txtContent": "[$Choice3]",
"attributes": {
"class": "sp-row-button ms-borderColor-blue sp-row-button ms-bgColor-purpleDark--hover ms-fontWeight-semibold ms-fontColor-white"
},
"customCardProps": {
"openOnEvent": "click",
"directionalHint": "rightCenter",
"isBeakVisible": true,
"beakStyle": {
"backgroundColor": "#3c3c3c"
},
"formatter": {
"elmType": "div",
"style": {
"color": "white",
"background-color": "#3c3c3c",
"border-color": "=if([$Choice3] == [$Answer], 'green', 'red')",
"border-style": "solid",
"border-width": "0.8px",
"width": "300px",
"height": "auto",
"padding": "10px"
},
"txtContent": "=if([$Choice3] == [$Answer], 'Correct: ' + [$Justification], 'Incorrect: ' + '[$Justification]')"
}
}
}
]
},
{
"elmType": "span",
"children": [
{
"elmType": "button",
"style": {
"height": "auto",
"margin-left": "10px",
"background-color": "transparent",
"border-radius": "4px",
"border-color": "#0082f0",
"display": "=if([$Choice4] == '', 'none', 'span')",
"text-align": "left",
"padding": "8px"
},
"txtContent": "[$Choice4]",
"attributes": {
"class": "sp-row-button ms-borderColor-blue sp-row-button ms-bgColor-purpleDark--hover ms-fontWeight-semibold ms-fontColor-white"
},
"customCardProps": {
"openOnEvent": "click",
"directionalHint": "rightCenter",
"isBeakVisible": true,
"beakStyle": {
"backgroundColor": "#3c3c3c"
},
"formatter": {
"elmType": "div",
"style": {
"color": "white",
"background-color": "#3c3c3c",
"border-color": "=if([$Choice4] == [$Answer], 'green', 'red')",
"border-style": "solid",
"border-width": "0.8px",
"width": "300px",
"height": "auto",
"padding": "10px"
},
"txtContent": "=if([$Choice4] == [$Answer], 'Correct: ' + [$Justification], 'Incorrect: ' + '[$Justification]')"
}
}
}
]
},
{
"elmType": "div",
"attributes": {
"iconName": "Lightbulb"
},
"style": {
"height": "auto",
"width": "100px",
"color": "white",
"padding": "8px",
"border": "0.5px solid #363636",
"border-radius": "8px",
"background-color": "#363636",
"box-shadow": "0 2px 4px rgba(0, 0, 0, 0.4)",
"margin": "4px",
"margin-left": "10px",
"margin-top": "20px",
"display": "=if([$MoreInfo] == '', 'none', 'block')"
},
"children": [
{
"elmType": "a",
"attributes": {
"href": "[$Blog]",
"target": "_blank"
},
"txtContent": "[$MoreInfo.desc]",
"style": {
"width": "auto",
"font-size": "14px",
"color": "white",
"text-decoration": "none",
"text-align": "start",
"padding-left": "8px"
}
}
]
}
]
}
]
}
}That is it, you should have a nicely formatted quiz in your Microsoft SharePoint list. Now just fill up the fields with quiz questions, answer choices, justifications, and the correct answer.
You can then embed the list using the list web part in your SharePoint teamsite for easy access to everyone.
In addition to being easy to use, Microsoft Lists is also highly customizable. You can embed the list into your SharePoint site using the native List web part, making it an ideal solution for organizations that are already using SharePoint.
In conclusion, creating a quiz with Microsoft Lists using JSON formatting is a great way to create a functional and professional-looking quiz with ease. Whether you’re a technical or non-technical user, Microsoft Lists provides a simple and flexible solution for your application development needs. So why not give it a try today?
See More Posts
Find me here
Copyright © 2023 Anand Vijayaragavan. All rights reserved.