Classic Quiz Management
Welcome to Fans United Classic Quiz Management Widget. The widget allows staff members with sufficient permissions to create new Classic Quizzes. You can use this widget as it is and embed it in your platform, or you can use the Management Panel to create Classic Quizzes. Classic Quiz is a mini-game where users must answer to questions. With successful installation, you can create, edit and delete a Classic Quiz mini-game.
Installation and usage
The easiest way to use fansunited-widget-classic-quiz-management is to install it from npm as follows:
npm install fansunited-widget-classic-quiz
or:
yarn add fansunited-widget-classic-quiz
Here is an example how you can integrate Fans United Classic Quiz Management Widget:
import 'fansunited-widget-classic-quiz/style.css';
import { ClassicQuizManager } from 'fansunited-widget-classic-quiz';
const App = () => {
return (
<ClassicQuizManager
fansUnitedApiKey={'your-api-key'}
fansUnitedClientId={'your-client-id'} />
);
}
Notes
-
The widget is bundled as a React component and its usage is as simple as the above example
-
Don't worry about your project's CSS. The widget's styling is done with Tailwind CSS and all classes are prefixed to avoid collisions with your existing CSS. This means that the widget's CSS will NOT affect yours. One important thing is that you need to import
style.css
file from package folder:
import 'fansunited-widget-classic-quiz/style.css';
N.B: If you are using an entry point for importing all your stylings, you need to import fansunited-widget-classic-quiz/style.css
there as well
- Easy translation in every language. For more information check our Translation heading.
Props
type ClassicQuizManagerProps = {
fansUnitedApiKey: string;
fansUnitedClientId: string;
fansUnitedLanguage?: string;
fansUnitedEnvironment?: string;
sportal365Project?: string;
sportal365Infrastructure?: 'shared' | 'betway';
labels?: LabelsModel;
};
Fans United Classic Quiz Management Widget depends on Fans United JS SDK and Fans United Client API. Thats why fansUnitedApiKey
and fansUnitedClientId
are required. They will be provided to you from Fans United team. For other optional props here is some information:
-
fansUnitedLanguage
- for our sports APIs FansUnited platform supports different languages. For now they are Bulgarian (bg), English (en), Romanian (ro), Greek (el), Slovak (sk), Serbian (sr) and Hungarian (hu). If no value given it will be set to English (en). -
fansUnitedEnvironment
- You can run the widget in the following environments: staging, production and watg. If no value given it will be set to production (prod). -
labels
- you can easily translate all labels, UI messages, descriptions, placeholders and etc. with this prop. By default, Fans United Match Quiz Management Widget is available in English so if no value is given, the widget will be translated in English. -
sportal365Project
- The Sportal365 project. Used as a request header when communicating with Sportal365 APIs. -
sportal365Infrastructure
- The Sportal365 infrastructure. Used to determine what authorization should be used when communicating with Sportal365 APIs. If no value given (when sportal365Project props is provided) it will be set to shared .
Translation
You can easily translate Fans United Classic Quiz Management Widget in your language! You just need to pass an object to labels
prop with concrete keys and values and that's it! Here's an example how you can do it:
import 'fansunited-widget-classic-quiz/style.css';
import { ClassicQuizManager } from 'fansunited-widget-classic-quiz';
const labels = {
userNotFound: 'User not found. Please try again',
noGamesFound: "No classic quizzes were found. You can create one by clicking the button 'Create'",
signOut: 'Sign out',
timeFormat: 'DD.MM.YYYY, HH:mm',
getClassicQuizzesErrorMessage: 'There was a problem with fetching classic quizzes',
title: 'Title',
status: 'Status',
participants: 'Participants',
averageScore: 'Average score',
perfectScore: 'Perfect score',
creationDate: 'Created at',
actions: 'Actions',
create: 'Create',
edit: 'Edit',
save: 'Save',
preview: 'Preview',
close: 'Close',
titlePlaceholder: 'Provide a title for your Classic Quiz',
description: 'Description',
descriptionPlaceholder: 'Describe your Classic Quiz',
images: 'Images',
rules: 'Rules',
rulesPlaceholder: 'Describe your rules for participating in Classic Quiz',
adContent: 'Ad content',
adContentPlaceholder: 'Place your ad content in Classic Quiz',
questionImages: 'Question images',
optionImages: 'Option images',
main: 'Main',
cover: 'Cover',
mobile: 'Mobile',
imagePlaceholder: 'Paste your image as valid URL or as relative path',
active: 'Active',
inactive: 'Inactive',
statusDescription: "When Classic Quiz is Inactive, then users are not allowed to participate. When the game is Active and there are users who have participated, you can't change the questions and options order and size",
time: 'Time',
timePlaceholder: 'Enter the time limit for answering questions by users. Time is in seconds',
repeatedValueMessage: 'You have entered a repeated value. Please enter a different one',
flags: 'Flags',
flagsPlaceholder: 'Type your flag and hit enter',
labels: 'Labels',
customFields: 'Custom fields',
dynamicFieldsDescription: 'You can create your custom attributes for easier way to connect or describe your Classic Quiz',
keyDynamicFields: 'Key',
valueDynamicFields: 'Value',
question: 'Question',
questionNumber: 'Question number',
questionPlaceholder: 'Type the question for your Classic Quiz',
questions: 'Questions',
questionsDescription: 'Define the questions for your Classic Quiz',
questionsParagraph: 'There are already participations in this quiz. You can no longer add/remove questions and options or change the correct options',
option: 'Option',
optionNumber: 'Option number',
optionPlaceholder: 'Type the option available for the question',
correct: 'Correct',
context: 'Context',
content: 'Content',
tags: 'Tags',
entity: 'Entity',
campaign: 'Campaign',
tagNumber: 'Tag number',
id: 'ID',
idContentPlaceholder: 'Type the ID of your content',
idCampaignPlaceholder: 'Type the ID of your campaign',
label: 'Label',
labelContentPlaceholder: "Type the content's label",
labelCampaignPlaceholder: "Type the campaign's label",
type: 'Type',
typeDescription: 'Select the Classic Quiz type. You can set the types in our Management Portal by going to Features, then clicking on the Classic Quiz page',
noType: "No type",
deleteLabel: 'Delete',
cancelLabel: 'Cancel',
confirmationQuestionLabel: 'Are you sure you want to delete',
typeContentPlaceholder: "Type the content's type",
previewClassicQuiz: 'Preview Classic Quiz',
getFootballEntitiesErrorMessage: "There was a problem with fetching football's data",
createClassicQuizMessage: 'You have successfully created Classic Quiz',
createClassicQuizErrorMessage: 'There was a problem creating Classic Quiz. Please try again',
titleRequiredFieldValidationMessage: 'Title field is required!',
questionsInvalidValidationMessage: 'At least one question with minimum two options is required to create a Classic Quiz',
questionRequiredFieldValidationMessage: 'The question itself is required for each question!',
optionRequiredFieldValidationMessage: 'The option itself is required for each option in each question!',
correctInvalidFieldValidationMessage: 'Only ONE correct option is valid for each question!',
tagsInvalidFieldValidationMessage: 'Tag entity is required!',
getClassicQuizErrorMessage: 'There was a problem with fetching classic quiz data. Please try again',
deleteClassicQuizMessage: 'You have successfully deleted Classic Quiz',
deleteClassicQuizErrorMessage: 'There was a problem with deleting classic quiz. Please try again',
updateClassicQuizMessage: 'You have successfully updated Classic Quiz',
updateClassicQuizErrorMessage: 'There was a problem updating Classic Quiz. Please try again',
uploadingImageMessage: 'You have successfully uploaded image',
generateSignedInUrlErrorMessage: 'There was a problem generating signed in URL to store the image in bucket. Please try again',
uploadingImageErrorMessage: 'There was a problem with uploading image to bucket. Please try again',
encryptingImageErrorMessage: 'There was a problem with encrypting image before uploading it to bucket. Please try again',
clear: 'Clear',
searchSportal365ImagesErrorMessage: 'There was a problem with searching images from Sportal 365 API. Please try again',
searchImage: 'Search image',
clearFromToFilterSportal365ImagesMessage: 'You have cleared from/to filter for Sportal365 search images',
hideFilters: 'Hide filters',
showFilters: 'Show filters',
dateFromTo: 'Date from/to',
dateFromToPlaceholder: 'Select Date...'
};
const App = () => {
return (
<ClassicQuizManager
fansUnitedApiKey={'your-api-key'}
fansUnitedClientId={'your-client-id'}
labels={labels}/>
);
}
Here is all information about LabelsModel
:
Key | Description | Default Value |
---|---|---|
userNotFound | On login screen when client gives invalid information about email or password. | User not found. Please try again |
noGamesFound | When there are no created games for specific client, this message will appear on screen. | No classic quizzes were found. You can create one by clicking the button 'Create' |
signOut | Used as label on sign out button. | Sign out |
getClassicQuizzesErrorMessage | react-toastify error message when request fails for fetching classic quizzes. | There was a problem with fetching classic quizzes |
title | Label for title | Title |
status | Status of a Classic Quiz | Status |
participants | Count of users who have participated in the game | Participants |
averageScore | Average score of users who have participated in the game | Average score |
perfectScore | Count of users who have answered perfect in the game | Perfect score |
creationDate | Date of created Classic Quiz in same format as given for timeFormat prop | Created at |
actions | Two icon buttons with different actions | Actions |
create | Label for management header | Create |
edit | Label for management header | Edit |
save | Label for save button | Save |
preview | Label for preview button | Preview |
close | Label for close button | Close |
titlePlaceholder | Placeholder/desciption about title input field name on management screen. | Provide a title for your Classic Quiz |
timeFormat | Timeformat for displaying dates. Widgets uses dayjs as a date dependency. | DD.MM.YYYY, HH:mm |
previous | Label for pagination button. | Previous |
next | Label for pagination button. | Next |
id | Label for ID read only input field. | ID |
description | Label for desciption input field on management screen. | Description |
descriptionPlaceholder | Placeholder/desciption about input field for game description when creating/editing a game. | Describe your Classic Quiz |
images | Label for images container. | Images |
rules | Label for rules rich text. | Rules |
rulesPlaceholder | Placeholder for rules rich text. | Describe your rules for participating in Classic Quiz |
adContent | Label for AD content rich text. | Ad content |
adContentPlaceholder | Placeholder for AD content rich text. | Place your ad content in Classic Quiz |
questionImages | Label for question images container. | Question images |
optionImages | Label for option images container. | Option images |
main | Label for main image. | Main |
cover | Label for cover image. | Cover |
mobile | Label for mobile image. | Mobile |
imagePlaceholder | Placeholder for image inputs. | Paste your image as valid URL or as relative path |
active | Label for status. | Active |
inactive | Label for status. | Inactive |
statusDescription | Description for status select. | When Classic Quiz is Inactive, then users are not allowed to participate. When the game is Active and there are users who have participated, you can't change the questions and options order and size |
time | Label for time input. | Time |
timePlaceholder | Placeholder for time input. | Enter the time limit for answering questions by users. Time is in seconds |
flags | Label for choosing flags. | Flags |
flagsPlaceholder | Placeholder on input field for flags | Type your flag and hit enter |
labels | Label for labels container | Labels |
customFields | Label for custom fields container | Custom fields |
dynamicFieldsDescription | Description paragraph for labels and custom fields containers | You can create your custom attributes for easier way to connect or describe your Classic Quiz |
keyDynamicFields | Label for key input | Key |
valueDynamicFields | Label for value input | Value |
repeatedValueMessage | react-toastify warning message when client submits same flag. | You have entered a repeated value. Please enter a different one |
question | Label for question input. | Question |
questionNumber | Label for question container's header. | Question number |
questionPlaceholder | Placeholder for question input. | Type the question for your Classic Quiz |
questions | Label for questions container. | Questions |
questionsDescription | Description for questions container. | Define the questions for your Classic Quiz |
questionsParagraph | Questions paragraph visible only when editing a Classic Quiz and it has participations. | There are already participations in this quiz. You can no longer add/remove questions and options or change the correct options |
option | Label for option input. | Option |
optionNumber | Label for option container's header. | Option number |
optionPlaceholder | Placeholder for option input. | Type the option available for the question |
correct | Label for correct radio button. | Correct |
context | Label for context container. | Context |
content | Label for context content container. | Content |
tags | Label for context tags container. | Tags |
entity | Label for entity search in tag. | Entity |
campaign | Label for context campaign container. | Campaign |
tagNumber | Label for context tag container's header. | Tag number |
id | Label for ID. | ID |
idContentPlaceholder | Placeholder for ID content in context. | Type the ID of your content |
idCampaignPlaceholder | Placeholder for ID content in campaign. | Type the ID of your campaign |
label | Label for context content/campaign label input. | Label |
labelContentPlaceholder | Placeholder for label content in context. | Type the content's label |
labelCampaignPlaceholder | Placeholder for label content in campaign. | Type the campaign's label |
type | Label for context content type input. | Type |
typeDescription | Description paragraph for type select. | Select the Classic Quiz type. You can set the types in our Management Portal by going to Features, then clicking on the Classic Quiz page |
noType | The default select option for Classic Quiz type. | No type |
deleteLabel | Label for delete button in confirmation modal. | Delete |
cancelLabel | Label for cancel button in confirmation modal. | Cancel |
confirmationQuestionLabel | Paragraph in confirmation modal. | Are you sure you want to delete |
typeContentPlaceholder | Placeholder for type content in context. | Type the content's type |
previewClassicQuiz | Title in preview modal. | Preview Classic Quiz |
clear | Label tippy clear button | Clear |
searchImage | Label for search image input | Search image |
hideFilters | Label for hyperlink to hide filters for image search | Hide filters |
showFilters | Label for hyperlink to show filters for image search | Show filters |
dateFromTo | Label for date from/to filter for image search | Date from/to |
dateFromToPlaceholder | Placeholder for input date from/to filter for image search | Select Date... |
getFootballEntitiesErrorMessage | react-toastify error message when typing the name of the entity in tags and request fails. | There was a problem with fetching football's data |
createClassicQuizMessage | react-toastify successful message when creating Classic Quiz | You have successfully created Classic Quiz |
createClassicQuizErrorMessage | react-toastify error message when creating Classic Quiz | There was a problem creating Classic Quiz. Please try again |
titleRequiredFieldValidationMessage | react-toastify error message when validating title for Classic Quiz | Title field is required! |
questionsInvalidValidationMessage | react-toastify error message when validating questions for Classic Quiz | At least one question with minimum two options is required to create a Classic Quiz |
questionRequiredFieldValidationMessage | react-toastify error message when validating question value for each question for Classic Quiz | The question itself is required for each question! |
optionRequiredFieldValidationMessage | react-toastify error message when validating option value for each question for Classic Quiz | The option itself is required for each option in each question! |
correctInvalidFieldValidationMessage | react-toastify error message when validating correct radio button for each option for Classic Quiz | Only ONE correct option is valid for each question! |
tagsInvalidFieldValidationMessage | react-toastify error message when validating tags for Classic Quiz | Tag entity is required! |
updateClassicQuizMessage | react-toastify successful message when updating Classic Quiz | You have successfully updated Classic Quiz |
updateClassicQuizErrorMessage | react-toastify error message when updating Classic Quiz | There was a problem updating Classic Quiz. Please try again |
deleteClassicQuizMessage | react-toastify successful message when deleting Classic Quiz | You have successfully deleted Classic Quiz |
deleteClassicQuizErrorMessage | react-toastify error message when deleting Classic Quiz | There was a problem with deleting classic quiz. Please try again |
uploadingImageMessage | react-toastify success message when uploading image to bucket | You have successfully uploaded image |
generateSignedInUrlErrorMessage | react-toastify error message when trying to receive a signed in URL. | There was a problem generating signed in URL to store the image in bucket. Please try again |
uploadingImageErrorMessage | react-toastify error message when uploading image to bucket | There was a problem with uploading image to bucket. Please try again |
encryptingImageErrorMessage | react-toastify error message when encrypting image before uploading it to bucket | There was a problem with encrypting image before uploading it to bucket. Please try again |
clearFromToFilterSportal365ImagesMessage | react-toastify info message when clearing date from/to filter | You have cleared from/to filter for Sportal365 search images |
searchSportal365ImagesErrorMessage | react-toastify error message when searching images from Sportal 365 API | There was a problem with searching images from Sportal 365 API. Please try again |
Updated 8 months ago