Reza_ashrafi
3 years ago
parent
4b9baecab0
commit
0fe08f3825
12 changed files with 345 additions and 67 deletions
|
After Width: | Height: | Size: 878 B |
Binary file not shown.
@ -0,0 +1,62 @@ |
||||
import React, { useState } from "react"; |
||||
import _ from "lodash"; |
||||
|
||||
export default function Question({ question }) { |
||||
const [select, setSelect] = useState(""); |
||||
return ( |
||||
<div className="w-3/4 flex flex-col my-3"> |
||||
<span |
||||
className="inline text-semibold py-2 px-3 rounded-sm bg-blueFF text-blue52" |
||||
style={{ width: "fit-content" }} |
||||
> |
||||
سوال ۱ |
||||
</span> |
||||
<p className="text-white text-sm my-2">{question.text}</p> |
||||
<ul className="list-none m-0 p-0 w-full"> |
||||
{question.options.map((option, index) => ( |
||||
<li |
||||
onClick={() => setSelect(option)} |
||||
className={_.join( |
||||
[ |
||||
"rounded-md w-full overflow-hidden flex flex-row items-center my-2 cursor-pointer transition-all duration-500", |
||||
], |
||||
" " |
||||
)} |
||||
style={{ |
||||
backgroundColor: select === option ? "#32af00" : "transparent", |
||||
borderColor: select === option ? "transparent" : "#f5f5f5", |
||||
borderWidth: 1, |
||||
borderStyle: "solid", |
||||
}} |
||||
key={index} |
||||
> |
||||
<span |
||||
className={_.join( |
||||
["h-full py-3 px-5 text-xs transition-all duration-500"], |
||||
" " |
||||
)} |
||||
style={{ |
||||
color: select === option ? "white" : "#E7E7E7", |
||||
backgroundColor: select === option ? "#329f00" : "#444", |
||||
}} |
||||
> |
||||
الف |
||||
</span> |
||||
<p |
||||
className={_.join( |
||||
[ |
||||
"text-xs mr-4 transition-all duration-500", |
||||
select === option ? "#66CD22" : "#E7E7E7", |
||||
], |
||||
" " |
||||
)} |
||||
style={{ color: select === option ? "white" : "#E7E7E7" }} |
||||
> |
||||
{option} |
||||
</p> |
||||
</li> |
||||
))} |
||||
</ul> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,114 @@ |
||||
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); |
||||
} else if(scrollY > 5.5 * height && scrollY < 6 * height) { |
||||
setTestPosition(() => scroll.testLinearFolmula(scrollY)); |
||||
setTranslateY(() => 0); |
||||
}else{ |
||||
|
||||
} |
||||
}; |
||||
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 #F1F1F1" }} |
||||
> |
||||
<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} /> |
||||
))} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
Test.defaultProps = { |
||||
title: "آزمون شیمی پایه دوازدهم متوسطه", |
||||
duration: "48:29", |
||||
questions: [ |
||||
{ |
||||
text: "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", |
||||
options: [ |
||||
"امکان دارد شاید و یا یک چیز دیگر", |
||||
"امکان دارد شاید و یا یک چیز دیگرر", |
||||
"امکان دارد شاید و یا یک چیز دیگرر", |
||||
"امکان دارد شاید و یا یک چیز دیگررر", |
||||
], |
||||
}, |
||||
{ |
||||
text: "نظر شما نسبت به تحولات جنوب غرب آسیا به ویژه حوزه دریای عمان و خلیج فارس چیست؟", |
||||
options: [ |
||||
"امکان دارد شاید و یا یک چیز دیگر", |
||||
"امکان دارد شاید و یا یک چیز دیگرر", |
||||
"امکان دارد شاید و یا یک چیز دیگرر", |
||||
"امکان دارد شاید و یا یک چیز دیگررر", |
||||
], |
||||
}, |
||||
], |
||||
}; |
||||
@ -1,24 +1,34 @@ |
||||
import React from "react"; |
||||
import React, { useEffect, useState } from "react"; |
||||
import Navbar from "../../components/Navbar"; |
||||
|
||||
import Page1 from "./Page1"; |
||||
import Page2 from "./Page2"; |
||||
import Page3 from "./Page3"; |
||||
import Page4 from "./Page4"; |
||||
// import Page3 from "./Page3";
|
||||
// import Page4 from "./Page4";
|
||||
import VideoTube from "./VideoTube"; |
||||
import Dots from "../../components/Dots"; |
||||
// import Dots from "../../components/Dots";
|
||||
|
||||
export default function Home() { |
||||
const [autoPlay, setAutoPlay] = useState(false); |
||||
useEffect(() => { |
||||
window.addEventListener("scroll", () => { |
||||
if (window.scrollY > 3 * window.innerHeight) { |
||||
setAutoPlay(() => true); |
||||
// alert('here');
|
||||
} else { |
||||
setAutoPlay(() => false); |
||||
} |
||||
}); |
||||
}, []); |
||||
return ( |
||||
<div |
||||
className="flex flex-col bg-white relative w-full rtl" |
||||
style={{ height: "700vh"}} |
||||
style={{ height: "700vh" }} |
||||
> |
||||
{/* <Dots page={1} /> */} |
||||
<Navbar /> |
||||
<Page1 page={1} /> |
||||
<Page2 page={2} /> |
||||
<VideoTube page={3} /> |
||||
<Page2 page={2} autoPlay={autoPlay} /> |
||||
<VideoTube page={3} autoPlay={autoPlay} /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
Loading…
Reference in new issue