diff --git a/client/src/pages/presentationEditor/components/QuestionComponentDisplay.tsx b/client/src/pages/presentationEditor/components/QuestionComponentDisplay.tsx index b43766eb0534eabf54d04f2498ceb57e708dd8df..91894c6fc9671e3867b1b0db3c3415f26cb40d6f 100644 --- a/client/src/pages/presentationEditor/components/QuestionComponentDisplay.tsx +++ b/client/src/pages/presentationEditor/components/QuestionComponentDisplay.tsx @@ -1,3 +1,16 @@ +/** + * What it is: + * This file contains the question component function which returns the question component. + * This component is used for displaying a question component for the participants with correct type of answer alternatives to interact with + * (see the function getAlternatives). + * + * How it's used: + * This file is used when a question component is to be displayed which happens in RndComponent.tsx for rendering in the editor + * and PresentationComponent.tsx for rendering in the presentation (the actual competition). + * + * @module + */ + import { Card, Divider, ListItem, Typography } from '@material-ui/core' import React from 'react' import { useAppSelector } from '../../../hooks' @@ -29,6 +42,10 @@ const QuestionComponentDisplay = ({ variant, currentSlideId }: QuestionComponent (state) => state.types.questionTypes.find((qType) => qType.id === questionTypeId)?.name ) + /** + * This function is used for displaying the correct answer alternatives which is the part of the question component + * which the participants will interact with to submit their answers. + */ const getAlternatives = () => { switch (questionTypeName) { case 'Text': diff --git a/client/src/pages/presentationEditor/components/answerComponents/AnswerMultiple.tsx b/client/src/pages/presentationEditor/components/answerComponents/AnswerMultiple.tsx index 7a2b1c59acf0277197d6126a7aba5b81a8799a37..2e6bdc91cbb4d31cc98d27c5510a00dbc7ca9e92 100644 --- a/client/src/pages/presentationEditor/components/answerComponents/AnswerMultiple.tsx +++ b/client/src/pages/presentationEditor/components/answerComponents/AnswerMultiple.tsx @@ -1,3 +1,17 @@ +/** + * What it is: + * Contains the component for the multiple choice question type ("Kryssfråga") + * which is displayed in the participant view in the editor and presentation. + * This is a part of a question component which the users will interact with to answer multiple choice questions. + * The participants get multiple alternatives and can mark multiple of these alternatives as correct. + * + * How it's used: + * This file is used when a question component is to be rendered which only happens in QuestionComponentDisplay.tsx. + * For more information read the documentation of that file. + * + * @module + */ + import { Checkbox, ListItem, ListItemText, Typography, withStyles } from '@material-ui/core' import { CheckboxProps } from '@material-ui/core/Checkbox' import { green, grey } from '@material-ui/core/colors' diff --git a/client/src/pages/presentationEditor/components/answerComponents/AnswerSingle.tsx b/client/src/pages/presentationEditor/components/answerComponents/AnswerSingle.tsx index 8c2fad17395e9c602a7108a72301739064ab4533..c3c7bb713b8703ee52a9f3328a2b295dea385997 100644 --- a/client/src/pages/presentationEditor/components/answerComponents/AnswerSingle.tsx +++ b/client/src/pages/presentationEditor/components/answerComponents/AnswerSingle.tsx @@ -1,3 +1,17 @@ +/** + * What it is: + * Contains the component for the single choice question type ("Alternativfråga") + * which is displayed in the participant view in the editor and presentation. + * This is a part of a question component which the users will interact with to answer multiple choice questions. + * The participants get multiple alternatives but can only mark one of these alternatives as correct. + * + * How it's used: + * This file is used when a question component is to be rendered which only happens in QuestionComponentDisplay.tsx. + * For more information read the documentation of that file. + * + * @module + */ + import { Checkbox, ListItem, ListItemText, Typography, withStyles } from '@material-ui/core' import { CheckboxProps } from '@material-ui/core/Checkbox' import { green, grey } from '@material-ui/core/colors' @@ -35,8 +49,8 @@ const AnswerSingle = ({ variant, activeSlide, competitionId }: AnswerSingleProps const updateAnswer = async (alternative: QuestionAlternative) => { if (activeSlide) { - // TODO: ignore API calls when an answer is already checked if (team?.question_answers[0]) { + // If an alternative was already marked await axios .put(`/api/competitions/${competitionId}/teams/${teamId}/answers/${answerId}`, { answer: alternative.text, @@ -50,6 +64,7 @@ const AnswerSingle = ({ variant, activeSlide, competitionId }: AnswerSingleProps }) .catch(console.log) } else { + // If no alternative was already marked await axios .post(`/api/competitions/${competitionId}/teams/${teamId}/answers`, { answer: alternative.text, @@ -87,6 +102,9 @@ const AnswerSingle = ({ variant, activeSlide, competitionId }: AnswerSingleProps checked: {}, })((props: CheckboxProps) => <Checkbox color="default" {...props} />) + /** + * Renders the radio button which the participants will click to mark their answer. + */ const renderRadioButton = (alt: QuestionAlternative) => { if (variant === 'presentation') { if (decideChecked(alt)) { diff --git a/client/src/pages/presentationEditor/components/answerComponents/AnswerText.tsx b/client/src/pages/presentationEditor/components/answerComponents/AnswerText.tsx index 465bffcbea76f2ba4273264b0246c131dc035824..b19388f10e4949a775454e8c5bfd1bafe05ac804 100644 --- a/client/src/pages/presentationEditor/components/answerComponents/AnswerText.tsx +++ b/client/src/pages/presentationEditor/components/answerComponents/AnswerText.tsx @@ -1,3 +1,17 @@ +/** + * What it is: + * Returns the component for the text question type ("Skriftlig fråga") + * which is a part of a question component which displayed in the participant view in the editor and presentation. + * This is the component the users will interact with to answer text questions. + * In practice the participants writes their answer in a text field. + * + * How it's used: + * This file is used when a question component is to be rendered which only happens in QuestionComponentDisplay.tsx. + * For more information read the documentation of that file. + * + * @module + */ + import { ListItem, ListItemText, TextField } from '@material-ui/core' import axios from 'axios' import React from 'react' @@ -18,6 +32,7 @@ const AnswerText = ({ activeSlide, competitionId }: AnswerTextProps) => { const teamId = useAppSelector((state) => state.competitionLogin.data?.team_id) const team = useAppSelector((state) => state.presentation.competition.teams.find((team) => team.id === teamId)) const answerId = team?.question_answers.find((answer) => answer.question_id === activeSlide?.questions[0].id)?.id + const onAnswerChange = (answer: string) => { if (timerHandle) { clearTimeout(timerHandle) diff --git a/client/src/pages/presentationEditor/components/answerComponents/Description.txt b/client/src/pages/presentationEditor/components/answerComponents/Description.txt new file mode 100644 index 0000000000000000000000000000000000000000..481f0340d9d3cf867be5f9f0a8439fad3feaa7fe --- /dev/null +++ b/client/src/pages/presentationEditor/components/answerComponents/Description.txt @@ -0,0 +1,2 @@ +The files in this directory generates the part of a question component which the participants +interacts with to change and submit their answer. \ No newline at end of file diff --git a/client/src/pages/presentationEditor/components/slideSettingsComponents/Description.txt b/client/src/pages/presentationEditor/components/slideSettingsComponents/Description.txt new file mode 100644 index 0000000000000000000000000000000000000000..1a4c4beadd2a193ea9bd576e146d28de92673109 --- /dev/null +++ b/client/src/pages/presentationEditor/components/slideSettingsComponents/Description.txt @@ -0,0 +1,2 @@ +Every file in this folder is only used in SlideSettings.tsx. +These files constitutes the content of the slide settings panel to the right in the editor. \ No newline at end of file diff --git a/client/src/pages/presentationEditor/components/slideSettingsComponents/Images.tsx b/client/src/pages/presentationEditor/components/slideSettingsComponents/Images.tsx index 60c68fb2aa287620547b6b6df38a8ed9da211893..5fe77c865480c313589d0085d84e2c79ed2891d8 100644 --- a/client/src/pages/presentationEditor/components/slideSettingsComponents/Images.tsx +++ b/client/src/pages/presentationEditor/components/slideSettingsComponents/Images.tsx @@ -1,5 +1,9 @@ -/* This file handles creating and removing image components, and uploading and removing image files from the server. +/** + * This file handles creating and removing image components, and uploading and removing image files from the server. + * + * @module */ + import { ListItem, ListItemText } from '@material-ui/core' import CloseIcon from '@material-ui/icons/Close' import axios from 'axios' diff --git a/client/src/pages/presentationEditor/components/slideSettingsComponents/Instructions.tsx b/client/src/pages/presentationEditor/components/slideSettingsComponents/Instructions.tsx index de34bc205b37cc60d6c086388e4c4d0995933bcd..fb97e6693e4ce2f0868b3ae5503e7acdb3369d84 100644 --- a/client/src/pages/presentationEditor/components/slideSettingsComponents/Instructions.tsx +++ b/client/src/pages/presentationEditor/components/slideSettingsComponents/Instructions.tsx @@ -1,3 +1,11 @@ +/** + * This file returns the instructions component + * The creator of a competition can add a description of how a question will be corrected. + * This information is showed in the judge view and will help the judges decide what answer was correct. + * + * @module + */ + import { ListItem, ListItemText, TextField } from '@material-ui/core' import axios from 'axios' import React from 'react' @@ -25,7 +33,6 @@ const Instructions = ({ activeSlide, competitionId }: InstructionsProps) => { window.setTimeout(async () => { if (activeSlide && activeSlide.questions?.[0]) { await axios - // TODO: Implement instructions field in question and add put API .put( `/api/competitions/${competitionId}/slides/${activeSlide.id}/questions/${activeSlide.questions[0].id}`, { diff --git a/client/src/pages/presentationEditor/components/slideSettingsComponents/MultipleChoiceAlternatives.tsx b/client/src/pages/presentationEditor/components/slideSettingsComponents/MultipleChoiceAlternatives.tsx index cf803d3a14588d4a172f6bc452ce4cb07dda6e20..60d741c8ec431bcde9bfc5e39a7f3df6816cc67f 100644 --- a/client/src/pages/presentationEditor/components/slideSettingsComponents/MultipleChoiceAlternatives.tsx +++ b/client/src/pages/presentationEditor/components/slideSettingsComponents/MultipleChoiceAlternatives.tsx @@ -1,3 +1,9 @@ +/** + * Lets a competition creator add, remove and handle alternatives for multiple choice questions ("Kryssfråga") in the slide settings panel. + * + * @module + */ + import { Checkbox, ListItem, ListItemText, withStyles } from '@material-ui/core' import { CheckboxProps } from '@material-ui/core/Checkbox' import { green, grey } from '@material-ui/core/colors' @@ -18,6 +24,7 @@ type MultipleChoiceAlternativeProps = { const MultipleChoiceAlternatives = ({ activeSlide, competitionId }: MultipleChoiceAlternativeProps) => { const dispatch = useAppDispatch() const activeSlideId = useAppSelector((state) => state.editor.activeSlideId) + const GreenCheckbox = withStyles({ root: { color: grey[900], @@ -28,6 +35,9 @@ const MultipleChoiceAlternatives = ({ activeSlide, competitionId }: MultipleChoi checked: {}, })((props: CheckboxProps) => <Checkbox color="default" {...props} />) + /** + * A checked checkbox is represented with 1 and an unchecked with 0. + */ const numberToBool = (num: number) => { if (num === 0) return false else return true diff --git a/client/src/pages/presentationEditor/components/slideSettingsComponents/QuestionSettings.tsx b/client/src/pages/presentationEditor/components/slideSettingsComponents/QuestionSettings.tsx index fb70e055dfc4858062a9123cf56dcb66fd6decdd..6fe2d51027c224bd84d3407b9e751c30f453cd25 100644 --- a/client/src/pages/presentationEditor/components/slideSettingsComponents/QuestionSettings.tsx +++ b/client/src/pages/presentationEditor/components/slideSettingsComponents/QuestionSettings.tsx @@ -1,3 +1,10 @@ +/** + * This file contatins the question settings component, which in turn lets the competition editor + * change the name of the question and how many points the participants can get when submittning the correct answer. + * + * @module + */ + import { ListItem, ListItemText, TextField } from '@material-ui/core' import axios from 'axios' import React, { useEffect, useState } from 'react' @@ -14,6 +21,7 @@ type QuestionSettingsProps = { const QuestionSettings = ({ activeSlide, competitionId }: QuestionSettingsProps) => { const dispatch = useAppDispatch() const [timerHandle, setTimerHandle] = useState<number | undefined>(undefined) + const handleChangeQuestion = ( updateTitle: boolean, event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement> @@ -28,6 +36,8 @@ const QuestionSettings = ({ activeSlide, competitionId }: QuestionSettingsProps) setName(event.target.value) } else setScore(+event.target.value) } + + // Set to not let the editor set a bigger number than this to affect the server in a bad way. const maxScore = 1000000 const updateQuestion = async ( diff --git a/client/src/pages/presentationEditor/components/slideSettingsComponents/SingleChoiceAlternatives.tsx b/client/src/pages/presentationEditor/components/slideSettingsComponents/SingleChoiceAlternatives.tsx index 6e38c39fe443b5c1e78810cb5731690870f8f614..16604f818b286fca8e51b1e92d0ba350017fc2a1 100644 --- a/client/src/pages/presentationEditor/components/slideSettingsComponents/SingleChoiceAlternatives.tsx +++ b/client/src/pages/presentationEditor/components/slideSettingsComponents/SingleChoiceAlternatives.tsx @@ -1,3 +1,9 @@ +/** + * Lets a competition creator add, remove and handle alternatives for single choice questions ("Alternativfråga") in the slide settings panel. + * + * @module + */ + import { ListItem, ListItemText } from '@material-ui/core' import CloseIcon from '@material-ui/icons/Close' import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonCheckedOutlined' diff --git a/client/src/pages/presentationEditor/components/slideSettingsComponents/SlideType.tsx b/client/src/pages/presentationEditor/components/slideSettingsComponents/SlideType.tsx index 2e4ee21619371873ea6bcc48b5d1b8ac55ad4d6f..d611380e4cb5e4127e6f31c2e63000d9b85ce7d1 100644 --- a/client/src/pages/presentationEditor/components/slideSettingsComponents/SlideType.tsx +++ b/client/src/pages/presentationEditor/components/slideSettingsComponents/SlideType.tsx @@ -1,3 +1,9 @@ +/** + * Lets a competition creator set the slide type for a slide such as "Informationssida" or "Skriftlig fråga" etc. + * + * @module + */ + import { Button, Dialog,