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
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: [ |
|
"امکان دارد شاید و یا یک چیز دیگر", |
|
"امکان دارد شاید و یا یک چیز دیگرر", |
|
"امکان دارد شاید و یا یک چیز دیگرر", |
|
"امکان دارد شاید و یا یک چیز دیگررر", |
|
], |
|
}, |
|
], |
|
};
|
|
|