Skip to content

2
2022-073
Commit a8197730 authored by Nilan Meegoda's avatar Nilan Meegoda
Browse files
Options

fix 2

parent b3de611b
Hide whitespace changes
Inline Side-by-side
Showing with 62 additions and 29 deletions
web-app/frontend/src/pages/attention_demo/attentionspan.jsx
View file @ a8197730
...@@ -24,6 +24,7 @@ const AttentionSpan_screen = () => { ...@@ -24,6 +24,7 @@ const AttentionSpan_screen = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [attention, setattention] = useState([]); const [attention, setattention] = useState([]);
const [videoLink, setVideoLink] = useState(""); const [videoLink, setVideoLink] = useState("");
const [isClicked, setisClicked] = useState(false);
const [teststate, setTestState] = useState(false); const [teststate, setTestState] = useState(false);
const [teststate2, setTestState2] = useState(false); const [teststate2, setTestState2] = useState(false);
const [teststate3, setTestState3] = useState(false); const [teststate3, setTestState3] = useState(false);
...@@ -77,6 +78,7 @@ const AttentionSpan_screen = () => { ...@@ -77,6 +78,7 @@ const AttentionSpan_screen = () => {
}) })
.then((res) => { .then((res) => {
setattention(res.data); setattention(res.data);
setisClicked(true);
}) })
.catch((err) => { .catch((err) => {
console.log(err); console.log(err);
...@@ -153,7 +155,8 @@ const AttentionSpan_screen = () => { ...@@ -153,7 +155,8 @@ const AttentionSpan_screen = () => {
<br className="hidden lg:inline-block" /> <br className="hidden lg:inline-block" />
</h1> </h1>
<p className="mb-8 leading-relaxed text-white"> <p className="mb-8 leading-relaxed text-white">
Dear child please watch this video until the end. It's a story of polar bear who likes to play alot. Dear child please watch this video until the end. It's a story
of polar bear who likes to play alot.
</p> </p>
<div className="flex justify-center"> <div className="flex justify-center">
<button <button
...@@ -212,16 +215,30 @@ const AttentionSpan_screen = () => { ...@@ -212,16 +215,30 @@ const AttentionSpan_screen = () => {
</p> </p>
<div className="m-2 mt-6"> <div className="m-2 mt-6">
<header className="App-header text-white"> <header className="App-header text-white">
{/* Calling a data from setdata for showing */} {!isClicked ? (
<p>Low level attention : {attention ? attention[0] * 100 : "processing.."}</p> <h2>Results are processing..</h2>
<p>Mid level attention : {attention ? attention[1] * 100 : "processing.."}</p> ) : (
<p>High level attention : {attention ? attention[2] * 100 : "processing.."}</p> <>
<p>
Low level attention :{" "}
{attention[0] * 100}
</p>
<p>
Mid level attention :{" "}
{attention[1] * 100}
</p>
<p>
High level attention :{" "}
{attention[2] * 100}
</p>
</>
)}
</header> </header>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<button <button
className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg" className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg"
onClick={() => setTestState(false)} onClick={() => {setTestState(false); setisClicked(false);}}
> >
Get Back Get Back
</button> </button>
...@@ -250,10 +267,7 @@ const AttentionSpan_screen = () => { ...@@ -250,10 +267,7 @@ const AttentionSpan_screen = () => {
<br className="hidden lg:inline-block" /> <br className="hidden lg:inline-block" />
</h1> </h1>
<p className="mb-8 text-white leading-relaxed"> <p className="mb-8 text-white leading-relaxed">
Copper mug try-hard pitchfork pour-over freegan heirloom neutra Dear child please watch this video.
air plant cold-pressed tacos poke beard tote bag. Heirloom echo
park mlkshk tote bag selvage hot chicken authentic tumeric
truffaut hexagon try-hard chambray.
</p> </p>
<div className="flex justify-center"> <div className="flex justify-center">
<button <button
...@@ -315,16 +329,30 @@ const AttentionSpan_screen = () => { ...@@ -315,16 +329,30 @@ const AttentionSpan_screen = () => {
</p> </p>
<div className="m-2 mt-6"> <div className="m-2 mt-6">
<header className="App-header text-white"> <header className="App-header text-white">
{/* Calling a data from setdata for showing */} {!isClicked ? (
<p>Low level attention : {attention[0] * 100}</p> <h2>Results are processing..</h2>
<p>Mid level attention : {attention[1] * 100}</p> ) : (
<p>High level attention : {attention[2] * 100}</p> <>
<p>
Low level attention :{" "}
{attention[0] * 100}
</p>
<p>
Mid level attention :{" "}
{attention[1] * 100}
</p>
<p>
High level attention :{" "}
{attention[2] * 100}
</p>
</>
)}
</header> </header>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<button <button
className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg" className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg"
onClick={() => setTestState2(false)} onClick={() => {setTestState2(false); setisClicked(false);}}
> >
Get Back Get Back
</button> </button>
...@@ -415,25 +443,30 @@ const AttentionSpan_screen = () => { ...@@ -415,25 +443,30 @@ const AttentionSpan_screen = () => {
</p> </p>
<div className="m-2 mt-6"> <div className="m-2 mt-6">
<header className="App-header text-white"> <header className="App-header text-white">
{/* Calling a data from setdata for showing */} {!isClicked ? (
<p> <h2>Results are processing..</h2>
Low level attention :{" "} ) : (
{attention[0] ? attention[0] * 100 : "Processing.."} <>
</p> <p>
<p> Low level attention :{" "}
Mid level attention :{" "} {attention[0] * 100}
{attention[1] ? attention[1] * 100 : "Processing.."} </p>
</p> <p>
<p> Mid level attention :{" "}
High level attention :{" "} {attention[1] * 100}
{attention[2] ? attention[2] * 100 : "Processing.."} </p>
</p> <p>
High level attention :{" "}
{attention[2] * 100}
</p>
</>
)}
</header> </header>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<button <button
className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg" className="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg"
onClick={() => setTestState3(false)} onClick={() => {setTestState3(false); setisClicked(false);}}
> >
Get Back Get Back
</button> </button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment