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 Navbar from "../../components/Navbar"; |
||||||
|
|
||||||
import Page1 from "./Page1"; |
import Page1 from "./Page1"; |
||||||
import Page2 from "./Page2"; |
import Page2 from "./Page2"; |
||||||
import Page3 from "./Page3"; |
// import Page3 from "./Page3";
|
||||||
import Page4 from "./Page4"; |
// import Page4 from "./Page4";
|
||||||
import VideoTube from "./VideoTube"; |
import VideoTube from "./VideoTube"; |
||||||
import Dots from "../../components/Dots"; |
// import Dots from "../../components/Dots";
|
||||||
|
|
||||||
export default function Home() { |
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 ( |
return ( |
||||||
<div |
<div |
||||||
className="flex flex-col bg-white relative w-full rtl" |
className="flex flex-col bg-white relative w-full rtl" |
||||||
style={{ height: "700vh"}} |
style={{ height: "700vh" }} |
||||||
> |
> |
||||||
{/* <Dots page={1} /> */} |
|
||||||
<Navbar /> |
<Navbar /> |
||||||
<Page1 page={1} /> |
<Page1 page={1} /> |
||||||
<Page2 page={2} /> |
<Page2 page={2} autoPlay={autoPlay} /> |
||||||
<VideoTube page={3} /> |
<VideoTube page={3} autoPlay={autoPlay} /> |
||||||
</div> |
</div> |
||||||
); |
); |
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue