-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy path11_flipcards.html
103 lines (103 loc) · 4.19 KB
/
11_flipcards.html
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, shrink-to-fit=no">
<link rel="stylesheet" href="../assets/thirdpartylib/bootstrap-4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/thirdpartylib/fontawesome-free-5.9.0-web/css/all.min.css">
<link rel="stylesheet" href="../assets/css/styles.min.css">
<link rel="stylesheet" href="../assets/css/custom.css">
<script src="../assets/thirdpartylib/jquery/jquery-3.3.1.slim.min.js" defer></script>
<script src="../assets/thirdpartylib/popper-js/popper.min.js" defer></script>
<script src="../assets/thirdpartylib/bootstrap-4.3.1/js/bootstrap.min.js" defer></script>
<script src="../assets/js/scripts.min.js" defer></script>
<title>Flip Cards</title>
</head>
<body><main>
<div class="container-fluid">
<div class="row">
<div class="col-12 banner-img"><img src="../assets/img/banner_01.jpg" alt="banner"></div>
<div class="col-sm-10 offset-sm-1">
<!-- DO NOT EDIT CODE ABOVE THIS LINE -->
<h1>Flip Cards</h1>
<p>Flip cards are useful to help students recall information quickly. They can be used as quick knowledge checks or self-assessments. Hover flip cards only allow one card to be flipped at a time, whereas click flip cards keep the cards flipped until they are clicked again. Use Heading 2 for text on the front sides of cards for accessibility.</p>
<p><strong>To copy Flip Cards onto a different page please make sure the page is in 'Edit HTML' mode.</strong></p>
<h2>Hover over, Tab to, or Tap to Flip the Cards</h2>
<p>These cards only stay flipped while the cursor is hovering over them, when tabbed to, or until another card is tapped on a phone/tablet. Click to the left of the card and move cursor with keyboard to edit text on front sides of cards. Hover over the card and click to edit text on back sides of cards.</p>
<!-- Flip card headings should be changed to respect page hierarchy -->
<p class="small">Flip Cards: Hover: start copy</p>
<div class="flip-card">
<div class="flip-card-inner" tabindex="0">
<div class="flip-card-front">
<h2>Hover Card Front 1</h2>
</div>
<div class="flip-card-back">
<p>Hover Card Back 1</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner" tabindex="0">
<div class="flip-card-front">
<h2>Hover Card Front 2</h2>
</div>
<div class="flip-card-back">
<p>Hover Card Back 2</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner" tabindex="0">
<div class="flip-card-front">
<h2>Hover Card Front 3</h2>
</div>
<div class="flip-card-back">
<p>Hover Card Back 3</p>
</div>
</div>
</div>
<p class="small">Flip Cards: Hover: end copy</p>
<h2>Click, Tab to + Press Enter, or Tap to Flip the Cards</h2>
<p>These cards stay flipped when clicked or tapped, or when using tab and Enter on the keyboard. Images will be resized to fit into the 300 x 300 px box.</p>
<p><strong>Note</strong>: You must open the <strong>source code</strong> editor using the toolbar icon </> in order to edit the back sides of the cards and to add a hidden Heading 2 to cards with images for screen reader users. (See comments in source code.)</p>
<p class="small">Flip Cards: Click: start copy</p>
<div class="flip-card-click">
<div class="flip-card-inner" tabindex="0">
<div class="flip-card-front">
<!-- H2 in same div with image for screen reader users only; not visible in browser -->
<h2 class="sr-only">Click Card Front 1</h2>
<img src="../assets/img/column_03.jpg" alt="Paper printed with bar and line graph next to cup of coffee">
</div>
<div class="flip-card-back">
<p>Click Card Back 1</p>
</div>
</div>
</div>
<div class="flip-card-click">
<div class="flip-card-inner" tabindex="0">
<div class="flip-card-front">
<h2>Click Card Front 2</h2>
</div>
<div class="flip-card-back">
<p>Click Card Back 2</p>
</div>
</div>
</div>
<div class="flip-card-click">
<div class="flip-card-inner" tabindex="0">
<div class="flip-card-front">
<h2>Click Card Front 3</h2>
</div>
<div class="flip-card-back">
<p>Click Card Back 3</p>
</div>
</div>
</div>
<p class="small">Flip Cards: Click: end copy</p>
<!-- DO NOT EDIT CODE BELOW THIS LINE --></div>
<div class="col-12"><footer><img src="../assets/img/logo.png" alt="logo"></footer></div>
</div>
</div>
</main>
</body>
</html>