blob: ad6965017baacb5457eff3865bc256529081df2b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
import { useEffect, useState } from "react";
import '../css/Modal.css';
function Modal() {
const [count, setCount] = useState(0);
const nextModal1 = () => {
setCount(1);
}
const nextModal2 = () => {
setCount(2);
}
const nextModal3 = () => {
setCount(3);
}
const nextModal4 = () => {
setCount(4);
}
const startModal = () => {
document.getElementById("main-modal").style.display = 'block';
setCount(0);
}
const exitModal = () => {
document.getElementById("main-modal").style.display = 'none';
}
return (
<div>
<div id="main-modal"className="modal" style={{display : 'block'}}>
{(count == 0) && <p className="m modal0">
<p className="align-center"><span className="span">Welcome to WatchDogs!</span></p>
<p className="align-center">Click start for an introduction to the WatchDogs interface.</p>
<p className="align-center"><button className="next" onClick={nextModal1}>Start</button></p>
<p className="align-center"><button className="skip" onClick={exitModal}>Skip</button></p>
</p>}
{(count == 1) && <p className="m modal1">
<p className="align-right"><i class="arrow right"></i></p>
<span className="span">This is the suspicion ranking pane,</span> which displays
high-profile traders and the suspicion score our algorithm assigned
to them. The higher an individual is ranked, the more likely they are involved in insider trading.
<p className="align-center"><button className="next" onClick={nextModal2}>Next</button></p>
</p>}
{(count == 2) && <p className="m modal2">
<p></p>
<span className="span">The Timeframe pane </span>
allows you to chose the timespan you'd like to see trade data from. Individuals' suspicion score will
be calculated based on the trades that occured during the timeframe you select.
<p className="align-center"><button className="next" onClick={nextModal3}>Next</button></p>
<p className="align-right"><i class="arrow down"></i></p>
</p>}
{count == 3 && <p className="m modal3">
<p className="align-left"><i class="arrow left"></i></p>
<span className="span">The Trader Graph </span>
shows how traders are related. Click on a name in the graph to see more information about that individual.
<p className="align-center"><button className="next" onClick={nextModal4}>Next</button></p>
</p>}
{count == 4 && <p className="m modal4">
<button className="next" onClick={exitModal}>You're ready to start using WatchDogs!</button>
</p>}
</div>
<span className="restart-modal align-center" onClick={startModal}></span>
</div>
);
}
export default Modal;
|
