-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
199 lines (173 loc) · 6.11 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en">
<head>
<!--
This is the page head - it contains info the browser uses to display the page
You won't see what's in the head in the page
Scroll down to the body element for the page content
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<!--
This is an HTML comment
You can write text in a comment and the content won't be visible in the page
-->
<title>Quiztory - Test your knowledge of Nigerian History!</title>
<!-- Meta tags for SEO and social sharing -->
<link rel="canonical" href="https://glitch-hello-website.glitch.me/" />
<meta
name="description"
content="A simple website, built with Glitch. Remix it to get your own."
/>
<meta name="robots" content="index,follow" />
<meta property="og:title" content="Hello World!" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://glitch-hello-website.glitch.me/" />
<meta
property="og:description"
content="A simple website, built with Glitch. Remix it to get your own."
/>
<meta
property="og:image"
content="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2Fhello-website-social.png?v=1616712748147"
/>
<meta name="twitter:card" content="summary" />
<!-- Import the webpage's stylesheet -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="/style.css" />
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- Import the webpage's javascript file -->
<script src="/script.js" defer></script>
</head>
<body>
<!--
This is the body of the page
Look at the elements and see how they appear in the rendered page on the right
Each element is defined using tags, with < and > indicating where each one opens and closes
There are elements for sections of the page, images, text, and more
The elements include attributes referenced in the CSS for the page style
-->
<h1 class="mt-4" style="font-weight: bold;color: orange;text-align: center">
Quiztory!
</h1>
<h5 class="mx-auto" style="width: 600px">
Test yourself on Nigerian History.
We use AI to generate questions from Wikipedia articles. Try "History of Nigeria"
</h5>
<div id="app" class="container mt-4">
<div class="row">
<div class="col-12" style="text-align: center">
<form id="form" onsubmit="event.preventDefault();">
<label for="article">Article title</label>
<input name="article" v-model="article" type="text" />
<input
type="submit"
@click="send"
class="btn btn-outline btn-dark"
:disabled="loading"
/>
</form>
<div class="my-2" v-if="questions.length > 0">
<p>
Questions on
<span class="font-italic text-info">{{ title }}</span> .
<a v-bind:href="url" target="_blank">View Original</a>
</p>
</div>
</div>
<div class="col-8">
<div id="qs" class="card" v-if="questions.length > 0" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
<ul class="list-group list-group-flush">
<Question
v-for="(q, i) in questions"
:key="i"
:question="q"
></Question>
</ul>
</div>
</div>
<div class="col-4">
<img height="100px" v-if="images.length > 0" :src="images[3]" />
<img height="100px" v-if="images.length > 0" :src="images[2]" />
<img height="100px" v-if="images.length > 0" :src="images[1]" />
</div>
</div>
</div>
<footer class="my-4 text-center">
By <a href="https://github.com/LeanKhan" target="_blank">LeanKhan</a>
</footer>
<script>
const api_url = "https://53ab-35-201-209-198.ngrok.io/";
document
.getElementById("form")
.addEventListener("onsubmit", function(evt) {
console.log(evt);
evt.preventDefault();
// submit();
});
</script>
<script>
const Question = {
template: `
<li class="list-group-item">
{{ question.q }}
<details>
<summary>
Answer
</summary>
<p class="alert alert-success mt-1" ><b>{{ question.ans }} </b> </p>
</details>
</li>
`,
props: ["question"]
};
</script>
<script>
Vue.component("Question", Question);
var app = new Vue({
el: "#app",
data() {
return {
authstatus: false,
questions: [],
article: "",
url: "",
links: [],
images: [],
loading: false
};
},
methods: {
send() {
this.loading = true;
console.log("YYY");
const url = new URL(api_url + "api/questions");
url.searchParams.append("article", this.article);
axios
.get(url)
.then(response => {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
this.questions = response.data.questions;
this.images = response.data.images;
this.links = response.data.links;
this.url = response.data.url;
this.title = response.data.title;
})
.finally(() => {
this.loading = false;
});
}
}
});
</script>
</body>
</html>