-
Notifications
You must be signed in to change notification settings - Fork 0
/
pronouns.html
140 lines (116 loc) · 9.26 KB
/
pronouns.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pronoun Practice!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Ribeye+Marrow:wght@400&display=swap"
data-tag="font"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300;400;500;600;700;800;900&display=swap"
data-tag="font"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Varela+Round:wght@400&display=swap"
data-tag="font"
/>
<link rel="stylesheet" href="pronouns.css">
</head>
<body>
<nav class="navbar" id = "navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html">
<button class = "home navbar-btn">
<img
src="icon4173-2yo-200w.png"
alt="icon4173"
class="dashboard-icon"
/><div class = "home-text">PRISM</div></button></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<<li><a href="pronounsPageOne.html"><button class = "navbar-right-btn navbar-btn">pronouns</button></a></li>
<li><a href="identities.html"><button class = "navbar-right-btn navbar-btn">identities</button></a></li>
<li><a href="chat.html"><button class = "navbar-right-btn navbar-btn">askPossum</button></a></li>
<li><a href="news.html"><button class = "navbar-right-btn navbar-btn">news</button></a></li>
<li><a href="about.html"><button class = "navbar-right-btn navbar-btn">about</button></a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div id = "select">
<div class = "col-sm-3"></div>
<div class = "col-sm-6">
<div class = "select-pronouns">
<p>Select which pronouns you want to use!</p>
<div id="button-group">
<button id="he">he</button>
<button id="she">she</button>
<button id="they">they</button>
<br>
<button id="it">it</button>
<button id="xe">xe</button>
<button id="ze">ze</button>
<br>
<button id="fae">fae</button>
<button id="per">per</button>
<button id="ey">ey</button>
</div>
</div>
</div>
</div>
<div class = "col-sm-3">
</div>
</li>
</div>
<div class = "row">
<div class = "col-sm-4"></div>
<div class = "col-sm-4" id = "go-area">
<button type="button" onclick="generateText()" id = "go-btn">Go!</button>
</div>
<div class = "col-sm-4"></div>
</div>
<div class = "row">
<div class="col-sm-12 practice">
<form id="pronoun-form"><p class = "pronoun-paragraph" id = "para1">Once upon a time, there was a delighted child named Apple. <input type="text" id="apple1" class = "apple" name="apple"> eagerly went to the circus with <input type="text" id="apple2" class = "apple" name="apple"> family. <input type="text" id="apple3" class = "apple" name="apple"> clutched <input type="text" id="apple4" class = "apple" name="apple"> ticket tightly, thrilled to witness the mesmerizing performances. Throughout the show, <input type="text" id="apple5" class = "apple" name="apple"> eyes sparkled with wonder as acrobats defied gravity, clowns spread laughter, and majestic animals performed their tricks. <input type="text" id="apple6" class = "apple" name="apple"> heart danced with joy, captivated by the enchanting spectacle. As the final act concluded, <input type="text" id="apple7" class = "apple" name="apple"> couldn't help but applaud with exuberance. The circus had filled <input type="text" id="apple8" class = "apple" name="apple"> with awe and left <input type="text" id="apple9" class = "apple" name="apple"> with precious memories to cherish forever.
</p>
<p class = "pronoun-paragraph" id = "para2">Once upon a time, there was a curious explorer named Quill. In a twist of fate, <input type="text" id="quill1" class = "quill" name="quill"> found <input type="text" id="quill2" class = "quill" name="quill"> wandering through a magical forest, captivated by its mystical allure. <input type="text" id="quill3" class = "quill" name="quill"> heart fluttered with both excitement and uncertainty as <input type="text" id="quill4" class = "quill" name="quill"> ventured deeper into the enchanting woods. The trees whispered ancient secrets, while gentle rays of sunlight filtered through the lush foliage. As <input type="text" id="quill5" class = "quill" name="quill"> navigated through the maze of emerald green, <input type="text" id="quill6" class = "quill" name="quill"> discovered hidden clearings and encountered creatures straight out of fairy tales. Despite the moments of confusion, <input type="text" id="quill7" class = "quill" name="quill"> embraced the adventure, finding solace in the forest's serene beauty. With each step, <input type="text" id="quill8" class = "quill" name="quill"> learned to trust <input type="text" id="quill9" class = "quill" name="quill"> instincts and adapt to the ever-changing surroundings. Eventually, guided by an inner compass, <input type="text" id="quill10" class = "quill" name="quill"> emerged from the forest, forever carrying the enchantment of that unforgettable journey within <input type="text" id="quill11" class = "quill" name="quill">.
</p>
<p class = "pronoun-paragraph" id = "para3">Once upon a time, a brilliant scientist named Mishap found <input type="text" id="mishap1" class = "mishap" name="mishap"> in a bewildering situation. While experimenting with a groundbreaking time machine, <input type="text" id="mishap2" class = "mishap" name="mishap"> accidentally got lost in the corridors of time. <input type="text" id="mishap3" class = "mishap" name="mishap"> journeyed through different epochs, witnessing pivotal moments in history. With each leap, <input type="text" id="mishap4" class = "mishap" name="mishap"> yearned to return to <input type="text" id="mishap5" class = "mishap" name="mishap"> present time. Armed with <input type="text" id="mishap6" class = "mishap" name="mishap"> scientific acumen, <input type="text" id="mishap7" class = "mishap" name="mishap"> analyzed artifacts and deciphered ancient texts to unlock the secret of returning home. Along the way, <input type="text" id="mishap8" class = "mishap" name="mishap"> encountered great minds and embraced the challenges as opportunities for growth. After a harrowing endeavor, <input type="text" id="mishap9" class = "mishap" name="mishap"> managed to stabilize the time machine and reemerged in <input type="text" id="mishap10" class = "mishap" name="mishap"> laboratory, forever changed by the profound voyage through time.
</p>
<p class = "pronoun-paragraph" id = "para4">In a realm where boundaries blurred, a curious changeling named Artifact stumbled upon a mystical book of reality-altering power. With cautious excitement, <input type="text" id="artifact1" class = "artifact" name="artifact"> delved into its ancient pages, discovering the ability to reshape the world at <input type="text" id="artifact2" class = "artifact" name="artifact"> will. Yet, <input type="text" id="artifact3" class = "artifact" name="artifact"> soon realized the delicate balance between desires and consequences, navigating treacherous challenges to protect the book from those who sought to exploit its magic. Through the transformative journey, <input type="text" id="artifact4" class = "artifact" name="artifact"> unearthed profound truths about identity and embraced <input type="text" id="artifact5" class = "artifact" name="artifact"> true self, leaving an indelible mark on the tapestry of reality with <input type="text" id="artifact6" class = "artifact" name="artifact"> remarkable adventures through enchanted realms.
</p>
</div>
</div>
<div class = "row">
<div class="col-sm-4"></div>
<div class="col-sm-4 form-object">
<button type="button" onclick="checkText()" id = "check-btn">Submit</button>
</form>
<p class = "result" id = "result-correct">Correct!</p>
<p class = "result" id = "result-incorrect">Not quite... Correct answers are displayed above.</p>
<button type = "button" onclick="reset()" id="reset-btn">More Practice!</button>
</div>
<div class="col-sm-4"></div>
</div>
</div>
</div>
<script src="pronouns.js"></script>
</body>
</html>