Fix Exam's questions and answers sizes (#180)

* Is it fixed? * Fixed Overextension of QuestionBox on Exam Page * Fixed The height and Streching of Question, when there is alot of text * Question Submission Page Improvement * Added Spacing tto the QuestionForm TextFields * Made Question in Approval appear with the correct size * Updated the use effect for improving question text resizing * Changed Answers minWidth
HackerSchool · May 24, 2022 · 5b9050d · 5b9050d
1 parent f3d27e7
commit 5b9050d
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 44 deletions.
diff --git a/frontend/src/components/questions/Question.js b/frontend/src/components/questions/Question.js
@@ -1,6 +1,6 @@
-import React from 'react';
+/* eslint-disable no-unused-vars */
+import React, { useState, useEffect, useRef } from 'react';
 import { Typography, Grid, Paper } from '@mui/material';
-import { useState } from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 import QuestionImage from './QuestionImage';
 import Answer from './Answers';
@@ -9,26 +9,30 @@ import remarkMath from 'remark-math';
 import remarkKatex from 'rehype-katex';
 import remarRehype from 'remark-rehype';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((boxWidth) => ({
 	questionBox: {
-		width: '100%',
 		borderRadius: 20,
 		boxShadow: '0px 8px 8px #9A9A9A',
 		backgroundColor: '#F9F9F9',
 		border: '0.05rem solid #D9D9D9',
+		minWidth: '25vw',
+		maxWidth: '60vw',
 	},
 
 	answers: {
 		backgroundColor: '#EB5757',
-		width: '100%',
 		borderRadius: 20,
 		justifyContent: 'center',
 		display: 'flex',
 		flexDirection: 'column',
 		padding: 5,
-		minWidth: 150,
+		minWidth: '15%',
+		maxWidth: '30%',
+	},
+	question: {
+		minWidth: '20%',
+		maxWidth: '85%',
 	},
-
 	number: {
 		backgroundColor: '#EB5757',
 		borderRadius: 90,
@@ -39,6 +43,7 @@ const useStyles = makeStyles(() => ({
 		position: 'relative',
 		height: '2rem',
 		top: '-1rem',
+		width: '9rem',
 	},
 
 	bold: {
@@ -63,23 +68,48 @@ const Question = (props) => {
 	const classes = useStyles();
 	const [selectedAnswer, setSelectedAnswer] = useState(props.selected);
 
+	const questionBox = useRef();
+	const answerBox = useRef();
+
+	const [boxWidth, setBoxWidth] = useState();
+	const [boxHeight, setBoxHeight] = useState();
+
 	const handleAnswer = (newAnswer) => {
 		setSelectedAnswer(newAnswer);
 		if (props.preview) return;
 		props.callBack(newAnswer, props.answer);
 	};
+	const computeQuestionTextSize = () => {
+		const widthAnswers = answerBox.current.clientWidth;
+		const widthAll = questionBox.current.clientWidth;
+		const difference = widthAll - widthAnswers - 100;
+		console.log(difference);
+		setBoxWidth(difference);
+	};
+	useEffect(() => {
+		computeQuestionTextSize();
+	}, []);
+
+	useEffect(() => {
+		window.addEventListener('resize', computeQuestionTextSize);
+	}, []);
 
 	return (
 		<Grid
 			className={classes.questionBox}
 			container
 			direction='row'
-			justifyContent='flex-start'
-			xs='auto'
+			justifyContent='space-between'
+			ref={questionBox}
 		>
-			<Grid style={{ minWidth: '400px' }} item xs='auto' justifyContent='center'>
+			<Grid
+				className={classes.question}
+				style={{ width: boxWidth }}
+				item
+				justifyContent='center'
+			>
 				{/* Question's number */}
-				<Grid item xs={5}>
+				<Grid item xs={12}>
 					<Paper className={classes.number}>
 						<Typography className={classes.bold} variant='h5'>
 							{' '}
@@ -106,23 +136,21 @@ const Question = (props) => {
 			</Grid>
 
 			{/* Answers */}
-			<Grid container xs='auto'>
-				<Paper className={classes.answers}>
-					<Grid container direction='column' justifyContent='space-around' spacing={3}>
-						{props.question.answer.map((answer) => {
-							return (
-								<Grid item className={classes.options} key={answer}>
-									<Answer
-										preview={props.preview}
-										selected={answer.id === selectedAnswer}
-										answer={answer}
-										changeAnswer={handleAnswer}
-									/>
-								</Grid>
-							);
-						})}
-					</Grid>
-				</Paper>
+			<Grid className={classes.answers} ref={answerBox} container xs='auto'>
+				<Grid container direction='column' justifyContent='space-around' spacing={3}>
+					{props.question.answer.map((answer) => {
+						return (
+							<Grid item className={classes.options} key={answer}>
+								<Answer
+									preview={props.preview}
+									selected={answer.id === selectedAnswer}
+									answer={answer}
+									changeAnswer={handleAnswer}
+								/>
+							</Grid>
+						);
+					})}
+				</Grid>
 			</Grid>
 		</Grid>
 	);

diff --git a/frontend/src/components/questions/QuestionApproval.js b/frontend/src/components/questions/QuestionApproval.js
@@ -35,7 +35,7 @@ const QuestionApproval = ({ question, callBack }) => {
 				</IconButton>
 			</Grid>
 
-			<Grid item xs={10}>
+			<Grid item xs='auto'>
 				<Question question={question} preview={true} />
 			</Grid>
 

diff --git a/frontend/src/components/questions/QuestionForm.js b/frontend/src/components/questions/QuestionForm.js
@@ -118,7 +118,15 @@ const QuestionForm = () => {
 	};
 
 	return (
-		<Grid container spacing={3} xs={12} align='center'>
+		<Grid
+			container
+			spacing={3}
+			xs={12}
+			direction='row'
+			justifyContent='center'
+			alignItems='center'
+			align='center'
+		>
 			{/* Question content */}
 			<Grid item xs={6}>
 				<TextField
@@ -171,7 +179,7 @@ const QuestionForm = () => {
 			</Grid>
 
 			{/* Answers */}
-			<Grid item xs={6} container>
+			<Grid item xs={6} container spacing={3}>
 				<Grid item xs={6}>
 					<TextField
 						value={correct}
@@ -275,7 +283,7 @@ const QuestionForm = () => {
 				type='success'
 			/>
 
-			<Grid item xs={12}>
+			<Grid item xs='auto' justifyContent='center' alignItems='center'>
 				<Question question={question} preview={true} />
 			</Grid>
 

diff --git a/frontend/src/components/questions/QuestionsGroup.js b/frontend/src/components/questions/QuestionsGroup.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import Question from './Question';
 import { useRef, forwardRef, useImperativeHandle } from 'react';
-import { Grid } from '@mui/material';
 import { submitExam } from '../../api';
 
 const QuestionsGroup = forwardRef((props, ref) => {
@@ -33,17 +32,13 @@ const QuestionsGroup = forwardRef((props, ref) => {
 	};
 
 	return (
-		<Grid container spacing={4}>
-			<Grid item xs='auto' key={props.exam.questions[props.questionIndex].id}>
-				<Question
-					selected={answers.current[props.questionIndex]}
-					answer={props.questionIndex}
-					key={props.exam.questions[props.questionIndex].id}
-					question={props.exam.questions[props.questionIndex]}
-					callBack={callBack}
-				/>
-			</Grid>
-		</Grid>
+		<Question
+			selected={answers.current[props.questionIndex]}
+			answer={props.questionIndex}
+			key={props.exam.questions[props.questionIndex].id}
+			question={props.exam.questions[props.questionIndex]}
+			callBack={callBack}
+		/>
 	);
 });