-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (125 loc) · 4.25 KB
/
index.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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>German A1 Practice</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css" />
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
margin: 12px 12px 12px 12px;
padding: 6px 12px 3px 12px;
}
</style>
<style>
/* this style tag is for collapsible */
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible:hover {
background-color: #555;
}
.content {
padding: 0 0px;
display: none;
overflow: hidden;
background-color: #ffffff;
}
</style>
<style>
#shuffle_chk {
margin-left: 10px;
}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-8JMJFM3SVX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-8JMJFM3SVX');
</script>
</head>
<body onload="loadPerfektData(shuffle=true)">
<div id="container">
<div id="header">
<h1>German A1 Practice</h1>
</div>
<div id="wrapper">
<div id="content">
<h1>Perfekt</h1>
<h2>Test Youself</h2>
<p>Fill in perfekt tense. <span style="color:green; font-weight: bold;">Green</span> for correct.
<span style="color:red; font-weight: bold;">Red</span> for wrong.
</p>
<p> Press <span style="font-weight: bold;">tab</span> to move to the next box.</p>
<p> Scroll to the bottom to see all the answers.</p>
<input type="checkbox" id="shuffle_chk" onchange="loadPerfektData(shuffle=this.checked)" checked><label>Shuffle
the order.</label>
<table id="perfekt_test"></table>
<script type="text/javascript" src="js/main.js"></script>
<!-- Answer -->
<p style="margin-bottom:3cm;"></p>
<button type="button" class="collapsible">Click here to reveal Answer</button>
<div class="content">
<table id="perfekt_answer"></table>
</div>
</div>
</div>
<div id="navigation">
<p><strong>Check other practice here</strong></p>
<hr />
<div id="menu">
<ul>
<li><a href="https://chien-liu.github.io/german-a1/index.html">Verbs</a></li>
<li><a href="https://chien-liu.github.io/german-a1/nom-akk-dat.html">Nom-Akk-Dat</a></li>
<li><a href="https://chien-liu.github.io/german-a1/noun.html">Nouns</a></li>
</ul>
</div>
</div>
<div id="extra">
<ul>
<p><strong>FYI</strong></p>
<p>The English translation comes from <a href="https://pypi.org/project/googletrans/">google translate</a>.</p>
<p>The Perfekt tense comes from <a href="https://conjugator.reverso.net/conjugation-german.html">Reverso
Conjugation</a></p>
<p>Contact me to add more verbs <a
hef="mailto:[email protected]?subject = german-a1-Feedback">[email protected]</a></p>
<p>Let's pass the German A1-2 together haha 😀</p>
</ul>
</div>
<div id="footer">
<p>View source code <a href="https://github.com/chien-liu/german-a1">here</a>. Star the repo if you found this
project helpful :)</p>
</div>
</div>
<script>
// The script is for collapible
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>