delete translate, and temp rediect to hp

client/src/components/GetImageAndQuestion.jsx

@@ -1,5 +1,6 @@
 
 import React, {useRef, useEffect, useState} from 'react';
+import { useNavigate } from 'react-router-dom';
 import { TruckId } from './Truck';
 
 import { EndCacheId } from './GetQuestion';
@@ -214,10 +215,13 @@ export const QuizGetImage = ({onPress, isClick,setButtonState}) => {
 
 
   const [myArray] = useState([imageArrayFromDB]);
- 
+  const navigate = useNavigate();
     
 useEffect(() => {
   
+    if(!TruckId) navigate('/')
+
+    
   fetch(`/quiz-pages?fire-truck=${TruckId}`)
     .then(res => res.json())
     .then(data => {

client/src/components/QuizGame.jsx

@@ -10,12 +10,11 @@ import FooterQuiz from './FooterQuiz';
 
 
 export let link = "";
-export let endScore = 0;
+export let endScore = null;
 
 const NavigationQuiz = ({score,buttonState}) => {
-  
-
-
+    
+ 
  
   link = /[^/]*$/.exec(`${window.location.href}`)[0];
   const navigate = useNavigate();

client/src/components/Result.jsx

@@ -10,22 +10,29 @@ import  {  CircularProgressbar ,  buildStyles  }  from  'react-circular-progress
 import 'react-circular-progressbar/dist/styles.css';
 
 const Result = () => {
-  
-
-
-    fetch('/quiz-results', {
-  method: 'POST',
-  headers: {
-    'Accept': 'application/json, text/plain, */*',
-    'Content-Type': 'application/json'
-  },
-  body: JSON.stringify({fireTruck: TruckId, seconds: SecondSeconds, points: endScore})
-});
-
   const navigate = useNavigate();
-  // UpdateTrackScore();
-
+    console.log(endScore);
+    useEffect(() => {
+      if(!endScore) navigate('/');
+    },[])
+    
 
+    if(endScore) {
+      useEffect(() => {
+   
+        fetch('/quiz-results', {
+          method: 'POST',
+          headers: {
+            'Accept': 'application/json, text/plain, */*',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({fireTruck: TruckId, seconds: SecondSeconds, points: endScore})
+        });
+        
+      }, [])
+    }
+  
+  
   return (
     <>
       <div className="container">

client/src/components/Truck.jsx

@@ -1,7 +1,7 @@
 
 import React, {useRef,useEffect} from 'react';
 import { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams,  useNavigate } from 'react-router-dom';
 import {Link} from 'react-router-dom';
 import { idUnits } from './SelectBox';
 export let TruckId = "";
@@ -9,11 +9,9 @@ export let TruckId = "";
 
 
 const Truck = () => {
-
   const {id} = useParams();
   const [trackName, setTrackName] = useState('');
   const textChooseTrack = useRef(true);
-  
 
   const handleImageClick = (e) => {
     let nameofTrack = e.target.getAttribute('name');
@@ -35,17 +33,18 @@ const Truck = () => {
 
   const BoxComponent = () => {
 
-
+    const navigate = useNavigate();
 
 
     
     let [truck, setTruck] = useState('');
     useEffect(()=> {
-
+        if(!idUnits) navigate('/')
       
       fetch(`/fire-trucks?osp-unit=${idUnits}`)
       .then(response => response.json())
       .then(data => {
+          
      setTruck(data.map(({ID,name,imagePath,avgPercent},index) => {
           TruckId = ID;
           let percent = avgPercent.toString().slice(0,3);

client/src/style/_Quiz.scss

@@ -79,8 +79,20 @@
   .questionText1 {
     color: white;
     font-size: 25px;
-    min-width: 200px;
-   
+    min-width: 40%; 
+  }
+}
+@media (max-width: 1200px) {
+  .questionText1 {
+    font-size: 22px;
+    min-width: 20%;
+  }
+}
+
+@media (max-width: 900px) {
+  .questionText1 {
+    font-size: 16px;
+    min-width: 100px;
   }
 }
 
@@ -333,7 +345,7 @@
 	outline: none;
 	background: none;
 	border: greenyellow solid 2px;
-	transform: translate(-50%, -50%);
+
   
 }
 .quiz_button {