You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

106 lines
3.6 KiB

import React, { useEffect, useState } from "react";
import _ from "lodash";
import timerIcon from "../../../assets/icons/timer.svg";
import QuestionBox from "./Question";
import scroll from "../../../utils/scroll";
export default function Test({ title, duration, questions }) {
const [translateY, setTranslateY] = useState(0);
const [testPosition, setTestPosition] = useState(null);
useEffect(() => {
setTranslateY(() =>
scroll.linearFormula(
window.scrollY > 5 * window.innerHeight
? 5 * window.innerHeight
: window.scrollY,
0,
-101,
4.5 * window.innerHeight,
5 * window.innerHeight
)
);
window.addEventListener("scroll", () => {
testTransformHandler(window.scrollY);
if (window.scrollY > 1000) {
localStorage.setItem(
"testRect",
JSON.stringify(
document.getElementById("test").getBoundingClientRect()
)
);
}
});
}, []);
const testTransformHandler = (scrollY) => {
const height = window.innerHeight;
if (scrollY <= 4.5 * height) {
setTranslateY(() => 0);
setTestPosition(() => null);
} else if (scrollY > 4.5 * height && scrollY < 5 * height) {
setTranslateY(() =>
scroll.linearFormula(scrollY, 0, -101, 4.5 * height, 5 * height)
);
setTestPosition(() => null);
}
};
return (
<div
onClick={(e) => e.stopPropagation()}
id="test"
className="w-full flex flex-col items-center justify-center bg-black bg-opacity-80 backdrop-filter backdrop-blur-2xl z-50"
style={{
minHeight: window.innerHeight - 180,
transform: `translateY(${translateY}%)`,
position: testPosition ? "fixed" : "static",
left: testPosition?.left ? testPosition?.left : "auto",
top: testPosition?.top ? testPosition?.top : "auto",
width: testPosition?.width ? testPosition?.width : "auto",
height: testPosition?.height ? testPosition?.height : "auto",
}}
>
<header
className="w-3/4 flex flex-row justify-between py-3 px-3 rounded-md"
style={{ border: "1px solid #777" }}
>
<div className="flex flex-row items-center">
<span
className="w-2 h-2 rounded-full ml-2"
style={{ backgroundColor: "#CEFDFF" }}
></span>
<h1 className="text-blueE8 text-md font-medium">{title}</h1>
</div>
<div className="flex flex-row items-center">
<img src={timerIcon} className="w-4 h-4 ml-1" />
<div className="text-sm text-green71">
{_.join(["زمان باقیمانده", duration], " ")}
</div>
</div>
</header>
{questions.map((question, index) => (
<QuestionBox question={question} key={index} />
))}
<button
className="text-md bg-blueC0 text-white py-3 px-4 rounded-md"
onClick={() => window.scrollTo(0, 5.5 * window.innerHeight)}
>
ثبت نهایی
</button>
</div>
);
}
Test.defaultProps = {
title: "آزمون شیمی پایه دوازدهم متوسطه",
duration: "48:29",
questions: [
{
text: "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟",
options: [
"امکان دارد شاید و یا یک چیز دیگر",
"امکان دارد شاید و یا یک چیز دیگرر",
"امکان دارد شاید و یا یک چیز دیگرر",
"امکان دارد شاید و یا یک چیز دیگررر",
],
},
],
};