Hugging Face's logo

Spaces:
pantdipendra
/
checklist
Running

App Files Community
checklist
File size: 3,118 Bytes 
d8a4b22
 
 
 
 
 
0dd94d5
 
d8a4b22
 
 
9b969ad
d8a4b22
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a934003
d8a4b22
 
3a3cce1
d8a4b22
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
cc86a99
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d8a4b22
73d11b4
 
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Secondary Use of Health Records Navigator</title>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js" defer></script>
  </head>
  <body>
    <header>
      <h1>Secondary Use of Health Records Flow Navigator: For Norway</h1>
    </header>

    <div class="topnav">
      <div class="toprow">
        <div class="progress" aria-label="progress">
          <span id="pbar"></span>
        </div>
        <button id="clearBtn" class="clear" title="Clear all progress">
          Clear
        </button>
      </div>
      <div id="dots" class="graph" aria-label="step navigation"></div>
    </div>

    <div class="wrap card">
      <!-- PURPOSE -->
      <div class="section">
        <h2 style="margin: 0 0 6px">
          What is the primary purpose of the secondary use of health records?
        </h2>
        <div class="purpose" id="purposeList"></div>
        <div class="tiny"><span class="req">★</span>: Important/Required</div>
      </div>

      <!-- Anonymized outcome -->
      <div class="section hidden" id="anonMsg">
        <div class="center">
          <svg width="72" height="72" viewBox="0 0 24 24" aria-hidden="true">
            <path
              fill="#79ffb7"
              d="M12 1 3 5v6c0 5 3.8 9.7 9 11c5.2-1.3 9-6 9-11V5z"
            />
          </svg>
          <p class="tiny" style="margin: 8px 0 0">
            <b>GDPR does not apply</b> to truly anonymized data (<a
              href="https://gdpr.eu/recital-26/"
              target="_blank"
              >Recital 26</a
            >).
          </p>
        </div>
      </div>

      <!-- TIMELINE -->
      <div class="section timeline" id="timeline"></div>

      <!-- Finish -->
      <div id="finish" class="finish" aria-live="polite">
        <div class="confetti" id="confetti"></div>
        <h2 id="finishTitle" style="margin: 6px 0 0">End</h2>
        <p id="finishSub" class="tiny"></p>
      </div>
    </div>

    <!-- Flow controller -->
    <div id="flow" class="flow hidden" role="group" aria-label="flow question">
      <div class="q">
        <strong id="qtxt">Ready?</strong>
        <div class="btns">
          <button class="cta y" id="yesBtn" aria-label="Yes">Yes</button>
          <button class="cta n" id="noBtn" aria-label="No">No</button>
        </div>
      </div>
    </div>

    <!-- Overlay for the bent arrow that links the active step to the flow bar -->
    <svg
      id="linkSvg"
      class="linksvg"
      viewBox="0 0 100 100"
      preserveAspectRatio="none"
      aria-hidden="true"
    >
      <defs>
        <marker
          id="arrowHead"
          viewBox="0 0 10 10"
          refX="8.5"
          refY="5"
          markerWidth="6"
          markerHeight="6"
          orient="auto-start-reverse"
        >
          <path d="M 0 0 L 10 5 L 0 10 z" fill="#cfe0ff"></path>
        </marker>
      </defs>
      <path id="linkPath" marker-end="url(#arrowHead)"></path>
    </svg>
  </body>
</html>