fix: ratings and inline queue

src/pages/ViewPublicationPage/Question.tsx

@@ -20,8 +20,6 @@ import { useCurrentQuiz } from "@root/quizes/hooks";
 import { getQuestionByContentId } from "@root/questions/actions";
 
 type QuestionProps = {
-  stepNumber: number;
-  setStepNumber: (step: number) => void;
   questions: AnyTypedQuizQuestion[];
 };
 

src/pages/ViewPublicationPage/index.tsx

@@ -11,7 +11,9 @@ import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
 export const ViewPage = () => {
   const quiz = useCurrentQuiz();
   const { questions } = useQuestions();
-  const [visualStartPage, setVisualStartPage] = useState<boolean>(!quiz?.config.noStartPage);
+  const [visualStartPage, setVisualStartPage] = useState<boolean>(
+    !quiz?.config.noStartPage
+  );
 
   useEffect(() => {
     const link = document.querySelector('link[rel="icon"]');
@@ -21,9 +23,9 @@ export const ViewPage = () => {
     }
   }, [quiz?.config.startpage.favIcon]);
 
-  const filteredQuestions = questions.filter(
-    ({ type }) => type
-  ) as AnyTypedQuizQuestion[];
+  const filteredQuestions = (
+    questions.filter(({ type }) => type) as AnyTypedQuizQuestion[]
+  ).sort((previousItem, item) => previousItem.page - item.page);
 
   return (
     <Box>
@@ -33,9 +35,7 @@ export const ViewPage = () => {
           showNextButton={!!filteredQuestions.length}
         />
       ) : (
-        <Question
-          questions={filteredQuestions}
-        />
+        <Question questions={filteredQuestions} />
       )}
     </Box>
   );

src/pages/ViewPublicationPage/questions/Rating.tsx

@@ -18,36 +18,38 @@ type RatingProps = {
 export const Rating = ({ currentQuestion }: RatingProps) => {
   const { answers } = useQuizViewStore();
   const theme = useTheme();
-  const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.content.id) ?? {};
+  const { answer } =
+    answers.find(
+      ({ questionId }) => questionId === currentQuestion.content.id
+    ) ?? {};
 
   return (
     <Box>
       <Typography variant="h5">{currentQuestion.title}</Typography>
       <Box
         sx={{
-          display: "flex",
-          flexDirection: "column",
+          display: "inline-block",
           width: "100%",
           marginTop: "20px",
         }}
       >
         <RatingComponent
           value={Number(answer || 0)}
-          onChange={(_, value) => updateAnswer(currentQuestion.content.id, String(value))}
+          onChange={(_, value) =>
+            updateAnswer(currentQuestion.content.id, String(value))
+          }
           sx={{ height: "50px" }}
           max={currentQuestion.content.steps}
           icon={
             <StarIconMini
               color={theme.palette.brightPurple.main}
               width={50}
-              sx={{ transform: "scale(0.8)" }}
             />
           }
           emptyIcon={
             <StarIconMini
               color={theme.palette.grey2.main}
               width={50}
-              sx={{ transform: "scale(0.8)" }}
             />
           }
         />
@@ -59,8 +61,12 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
             color: theme.palette.grey2.main,
           }}
         >
-          <Typography>{currentQuestion.content.ratingNegativeDescription}</Typography>
-          <Typography>{currentQuestion.content.ratingPositiveDescription}</Typography>
+          <Typography>
+            {currentQuestion.content.ratingNegativeDescription}
+          </Typography>
+          <Typography>
+            {currentQuestion.content.ratingPositiveDescription}
+          </Typography>
         </Box>
       </Box>
     </Box>