-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
153 lines (122 loc) · 8.34 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
146
147
148
149
150
151
152
153
<!DOCTYPE HTML>
<!--
AMC Problem Generator
Copyright (C) 2021
THIS PROGARM IS FREE SOFTWARE; YOU CAN REDISTRIBUTE IT AND/OR MODIFY
IT UNDER THE TERMS OF THE GNU GENERAL PUBLIC LICENSE AS PUBLISHED BY
THE FERE SOFTWARE FOUNDATION; EITHER VERSION 2 OF THE LICENSE, OR
VERSION 2.1
THIS PROGRAM IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL
BUT WITHOUT ANY WARRANTY; WITHOUT EVEN THE IMPLIED WARRANTY OF
MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. SEE THE
GNU GENERAL PUBLIC LICENSE FOR MORE DETAILS.
-->
<html lang="en" dir="ltr" id="html">
<link rel="icon" href="img/icon.png" type="image/x-icon">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-P98FJ92R7Z"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-P98FJ92R7Z');
</script>
<!-- script imports -->
<script src="js/draw.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<!-- Primary Meta Tags -->
<title>AMC Trainer!</title>
<meta name="title" content="AMC Trainer!">
<meta name="description" content="A FREE interactive 👆 trainer practice tool which generates math problems for your specific AMC level 📈 (such as AMC 8/10/12/AIME). Great tool for math competition preparation, study, and training!">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.amctrainer.com/">
<meta property="og:title" content="AMC Trainer!">
<meta property="og:description" content="A FREE interactive 👆 trainer practice tool which generates math problems for your specific AMC level 📈 (such as AMC 8/10/12/AIME). Great tool for math competition preparation, study, and training!">
<meta property="og:image" content="https://www.amctrainer.com/img/amctrainercard.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://www.amctrainer.com/">
<meta property="twitter:title" content="AMC Trainer!">
<meta property="twitter:description" content="A FREE interactive 👆 trainer practice tool which generates math problems for your specific AMC level 📈 (such as AMC 8/10/12/AIME). Great tool for math competition preparation, study, and training!">
<meta property="twitter:image" content="https://www.amctrainer.com/img/amctrainercard.png">
<link rel="stylesheet" href="css/style.css">
</head>
<img alt="The AMC Trainer logo" id="logo" src="img/logo_blue.png">
<body id="body" class="body">
<button type="button" onclick="window.location.href='play'" style="position: relative; width: 15rem; height: 5rem; left: 50%; transform: translateX(-50%); border-radius: 1rem; font-size: 1.6em;" class="button" data-hover="Play">Play</button><br><br>
<p>
<h1>Fun Intro 😎</h1>
<h2 class="h2">Who?</h2>
<p>For <b>THE</b> math-enthusiast-tech savvy-4.8 GPA-overachiever-future doctor and entrepreneur 💥 ℼ ∫ 🥇</p>
<h2 class="h2">Why? 💹</h2>
<p>
We created this <b>AMAZING</b> math website practice tool to make <b>YOU</b> become the star 🌟 of your family and maybe your whole state! 🏆
<br><br>
If you just simply want to do <b>BETTER</b> on the next AMC test, then this is the website for you! 🥇
</p>
<h2 class="h2"> What? 📈</h2>
<p>A <b>FREE</b> interactive 👆 trainer practice tool which generates math problems to help study for your specific AMC level (such as AMC 8/10/12/AIME). Great practice tool for math competition preparation!</p>
<h2 class="h2"> How? 👨💻</h2>
<p>Generates problems from past AMC 8/10/12/AIME exams and caters to your specific level.</p>
<h2 class="h2">What else? 💡</h2>
<p>
If you have any suggestions/comments please let us know <a target="_blank" href = "https://artofproblemsolving.com/community/c1967976h2362114p19241124">here</a>.
<br>
Happy 😎😃 MATHING 🧮 ➖👨🔬 ℼ ➗ ➕
<br><br>
~ Emojis courtesy of my mom 😜
</p>
</p>
<br>
<h1>Navigation</h1>
<h2 class="h2">Answer Format</h2>
<p>
The answer format for AMC 8/10/12 is a single letter from the multiple choice options (A, B, C, D, or E). You may enter the letter as uppercase or lowercase.
</p>
<p>
For AIME problems, your answer must be a single 3-digit number. For example, if you find the answer to the problem is 123, please enter 123 as your answer. Also, make sure to include leading zeros for numbers less than 100. For example, if your answer is 67, please enter 067. If your answer is 9, enter 009.
</p>
<h2 class="h2">Settings</h2>
<p>
The AMC trainer also provides several customization options. They are broken down by category below.
</p>
<h3 class="h3">Options</h3>
<p>
In this tab, you are able to customize which math competition to train with. You can choose a single exam version (AMC 8, AMC 10, AMC 12, or AIME) or a combination of all of them with the “All” option. You may also find that some problems in the AMC 10 show up in the AMC 12, or vice versa; this is because the MAA (Mathematical Association of America) specifically overlaps problems between the two tests. Although they may be the same problems, they are not always in the same section of the test. In other words, an AMC 12 5 might be placed as an AMC 10 11 since AMC 12 problems tend to be more difficult than AMC 10 problems.
</p>
<h3 class="h3">Colors</h3>
<p>
In this tab, you can change the color of a variety of components on the webpage. At the top, you may change the text color of the problem and invert the images. This feature is implemented mostly to allow for a seamless experience with a dark color scheme (see below).
</p>
<p>
In the colors settings, you can also customize the background and button colors. The first box will set the left color for the background gradient and the second box will set the right color for the background gradient. Also, the buttons are bound to the background gradient colors such that the first box will set the right color for the button gradient and the second box will set the left color for the button gradient. In other words, the background and button gradients are horizontally inversely bound to each other.
</p>
<h3 class="h3">Customization</h3>
<p>
In the final tab, you have the ability to toggle the wiggle of images when you hover over them. This is more for aesthetic purposes than for actually helping in training.
</p>
<p>
You can also change the font family of all the text on the screen to your liking. It is important to note that some of the fonts will not render as it depends on the fonts installed on your browser (i.e. Chrome, Firefox, Safari, etc.) and operating system (i.e. Windows, Mac, Linux, etc.).
</p>
<h2 class="h2">Additional Features</h2>
<p>
You may have also noticed two other icons on the screen: the fire icon and the pencil image.
</p>
<h3 class="h3">Streak</h3>
<p>
The fire icon represents your correct problem streak. If you get a problem correct, your streak will increase by 1. Be careful! If you get a problem incorrect, your streak will reset to 0.
</p>
<h3 class="h3">Drawing Tool</h3>
<p>
When you click on the pencil image, it triggers the on-screen drawing tool. With this drawing tool, you can change the color of your drawing tool, you can clear the screen with the garbage can icon, and you can also erase with the eraser icon.
</p>
<br><br>
<p>
<button class="button" onclick="window.location.href='play'" data-hover="Go Train!">Go train!</button>
</p>
<br><br>
</body></html>