Skip to content

Commit a60746f

Browse files
third774third774
committed
add trivia slides
1 parent 2a45fa6 commit a60746f

File tree

4 files changed

+349
-3
lines changed

4 files changed

+349
-3
lines changed

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import "reveal.js/dist/reveal.css";
66
import "./styles/index.scss";
77
import Splash from "./slides/splash";
88
import Agenda202512 from "./slides/agenda-2025-12";
9+
import Trivia202512 from "./slides/trivia-2025-12";
910
import Thanks from "./slides/thanks";
1011

1112
function App() {
@@ -47,6 +48,7 @@ function App() {
4748
<div className="slides">
4849
<Splash />
4950
<Agenda202512 />
51+
<Trivia202512 />
5052
<Thanks />
5153
</div>
5254
</div>

‎src/slides/agenda-2025-12.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,8 @@ const Agenda202512 = () => {
77
<ol>
88
<li>Welcome!</li>
99
<li>Shirts!</li>
10-
<li>⚡️ Organize, notate, and fold your code better in VS Code</li>
11-
<li>⚡️ Coding in 26</li>
12-
<li>⚡️ Jujutsu VCS</li>
1310
<li>Battledecks</li>
11+
<li>⚡️ Jujutsu VCS</li>
1412
<li>Trivia</li>
1513
<li>Wrap up</li>
1614
</ol>

‎src/slides/trivia-2025-12.tsx‎

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
interface TriviaQuestion {
2+
category: string;
3+
question: string;
4+
options: string[];
5+
}
6+
7+
const triviaQuestions: TriviaQuestion[] = [
8+
{
9+
category: "New API's (html/css/js)",
10+
question:
11+
"Which new global JavaScript object is designed to replace the legacy `Date` API with a more reliable and timezone-aware system?",
12+
options: ["Chrono", "Temporal", "TimeZone", "DateTime"],
13+
},
14+
{
15+
category: "New API's (html/css/js)",
16+
question:
17+
"Which ECMAScript proposal introduces an operator that allows the result of one expression to be passed directly into the next?",
18+
options: [
19+
"Stream operator",
20+
"Sequence operator",
21+
"Flow operator",
22+
"Pipeline operator",
23+
],
24+
},
25+
{
26+
category: "New API's (html/css/js)",
27+
question:
28+
"Which CSS feature allows an element to be positioned relative to another element without writing JavaScript?",
29+
options: [
30+
"Anchor Positioning API",
31+
"CSS Position Queries",
32+
"Relative Layout Model",
33+
"Element Binding API",
34+
],
35+
},
36+
{
37+
category: "New API's (html/css/js)",
38+
question:
39+
"Which CSS at-rule enables styles to apply only to a specific section of the DOM, preventing selector leakage?",
40+
options: ["@region", "@subset", "@scope", "@context"],
41+
},
42+
{
43+
category: "New API's (html/css/js)",
44+
question:
45+
"What HTML feature allows an element—such as a button—to declaratively trigger an action (like opening a dialog) on a target element without JavaScript?",
46+
options: [
47+
"HTML Actions API",
48+
"Invoker Commands API",
49+
"Declarative Events API",
50+
"Element Control Attributes",
51+
],
52+
},
53+
{
54+
category: "New API's (html/css/js)",
55+
question:
56+
"Which JavaScript API allows web applications to perform computations on a background thread and then synchronously access the result without blocking the main thread?",
57+
options: [
58+
"Web Workers",
59+
"Service Workers",
60+
"OffscreenCanvas",
61+
"Atomics + SharedArrayBuffer",
62+
],
63+
},
64+
{
65+
category: "History of the Web",
66+
question: 'What major tech company trademarked the word "JavaScript"?',
67+
options: ["Sun Microsystems", "Microsoft", "Netscape", "Oracle"],
68+
},
69+
{
70+
category: "History of the Web",
71+
question: "What company created the V8 JavaScript engine?",
72+
options: ["Mozilla", "Google", "Apple", "Netscape"],
73+
},
74+
{
75+
category: "History of the Web",
76+
question:
77+
"What major event in 2010 caused Flash to rapidly decline in favor of HTML5?",
78+
options: [
79+
"The launch of Chrome",
80+
"Apple's refusal to support Flash on the iPhone/iPad",
81+
"Adobe discontinuing Flash Player",
82+
"A major Flash security breach",
83+
],
84+
},
85+
{
86+
category: "History of the Web",
87+
question:
88+
"What was the name of the first widely-used JavaScript package manager?",
89+
options: ["npm", "bower", "yarn", "JamJS"],
90+
},
91+
{
92+
category: "History of the Web",
93+
question:
94+
"What influential 1996 web standard introduced inline frames (iframes)?",
95+
options: ["HTML 2.0", "HTML 3.2", "HTML 4.0", "XHTML 1.0"],
96+
},
97+
{
98+
category: "History of the Web",
99+
question:
100+
"Which npm package has the most installs of all time (direct installs)?",
101+
options: ["express", "react", "lodash", "axios"],
102+
},
103+
{
104+
category: "History of the Web",
105+
question:
106+
"Which JavaScript runtime existed before Node.js and ran JavaScript on the JVM?",
107+
options: ["Nashorn", "Rhino", "SpiderMonkey", "GraalJS"],
108+
},
109+
{
110+
category: "History of the Web",
111+
question:
112+
"In 2025, Microsoft announced it would be re-writing TypeScript in which language?",
113+
options: ["Rust", "C++", "Go", "Zig"],
114+
},
115+
{
116+
category: "JS Quirks",
117+
question: "Array.isArray(new Uint8Array(10)) evaluates to:",
118+
options: ["true", "false", "TypeError", "[object Uint8Array]"],
119+
},
120+
{
121+
category: "JS Quirks",
122+
question: "What is the result of the expression: [1,2] + [3,4]",
123+
options: ['"1,2,3,4"', "[1, 2, 3, 4]", "SyntaxError", '"1,23,4"'],
124+
},
125+
{
126+
category: "JS Quirks",
127+
question:
128+
"Which of the following is a VALID way to store data in the localStorage Web API?",
129+
options: [
130+
'localStorage.set("foo", "bar")',
131+
'localStorage.add("foo", "bar")',
132+
'localStorage.write("foo", "bar")',
133+
'localStorage.foo = "bar"',
134+
],
135+
},
136+
{
137+
category: "JS Quirks",
138+
question:
139+
"Which of the following patterns becomes a specific SyntaxError when 'use strict' is enabled?",
140+
options: [
141+
"if (true) function f() { }",
142+
"delete object.prop",
143+
"function foo(a, a) { ... }",
144+
],
145+
},
146+
{
147+
category: "JS Quirks",
148+
question: "Which of the following statements is true?",
149+
options: [
150+
"null instanceof Object",
151+
'typeof null === "object"',
152+
"null == NaN",
153+
"null === undefined",
154+
],
155+
},
156+
{
157+
category: "JS Quirks",
158+
question:
159+
"What does JSON.stringify({ a: undefined, b: null, c: [undefined] }) return?",
160+
options: [
161+
'{"a":undefined,"b":null,"c":[undefined]}',
162+
'{"b":null,"c":[null]}',
163+
'{"a":null,"b":null,"c":[null]}',
164+
"Throws a TypeError",
165+
],
166+
},
167+
{
168+
category: "Modern JavaScript Syntax & Features",
169+
question:
170+
"Which keyword allows you to declare a variable that cannot be reassigned?",
171+
options: ["let", "const", "final", "immutable"],
172+
},
173+
{
174+
category: "Modern JavaScript Syntax & Features",
175+
question: "What does the ?? operator do in JavaScript?",
176+
options: [
177+
"Returns the right operand if the left is null or undefined",
178+
"Returns the right operand if the left is falsy",
179+
"Performs null checking and throws an error",
180+
"Combines two values into an array",
181+
],
182+
},
183+
{
184+
category: "Modern JavaScript Syntax & Features",
185+
question: "Which method allows you to create a shallow copy of an array?",
186+
options: [
187+
"[...array]",
188+
"array.slice()",
189+
"Array.from(array)",
190+
"All of the above",
191+
],
192+
},
193+
{
194+
category: "Modern JavaScript Syntax & Features",
195+
question: "Which of the following is not a valid method on Promises?",
196+
options: [
197+
"Promise.race()",
198+
"Promise.settled()",
199+
"Promise.finally()",
200+
"Promise.try()",
201+
],
202+
},
203+
{
204+
category: "Modern JavaScript Syntax & Features",
205+
question: 'What is the output of: [..."hello"]?',
206+
options: [
207+
'"hello"',
208+
'["h","e","l","l","o"]',
209+
'["hello"]',
210+
"Error: strings are not iterable",
211+
],
212+
},
213+
{
214+
category: "Modern JavaScript Syntax & Features",
215+
question:
216+
"Which method returns a new array with all sub-array elements concatenated into it recursively up to a specified depth?",
217+
options: ["flatten()", "concat()", "merge()", "flat()"],
218+
},
219+
{
220+
category: "JavaScript Culture & Ecosystem",
221+
question: 'What does "Deno" (the Node.js alternative) stand for?',
222+
options: [
223+
"Destroy Node",
224+
"Decentralized Node",
225+
"Design Node",
226+
"It doesn't stand for anything",
227+
],
228+
},
229+
{
230+
category: "JavaScript Culture & Ecosystem",
231+
question: "What year was Node.js first released?",
232+
options: ["2005", "2007", "2009", "2011"],
233+
},
234+
{
235+
category: "JavaScript Culture & Ecosystem",
236+
question: "What is the most starred JavaScript project on GitHub?",
237+
options: ["React", "Vue.js", "freeCodeCamp", "Node.js"],
238+
},
239+
{
240+
category: "JavaScript Culture & Ecosystem",
241+
question:
242+
"What infamous npm package with only 11 lines of code broke thousands of projects when unpublished in 2016?",
243+
options: ["left-pad", "is-array", "pad-left", "string-pad"],
244+
},
245+
{
246+
category: "JavaScript Culture & Ecosystem",
247+
question: 'What does "JSX" stand for?',
248+
options: [
249+
"JavaScript Extension",
250+
"JavaScript XML",
251+
"Reactive JavaScript",
252+
"JavaScript Syntax",
253+
],
254+
},
255+
];
256+
257+
const Trivia202512 = () => {
258+
return (
259+
<>
260+
{triviaQuestions.map((q, index) => (
261+
<section key={index}>
262+
<div className="triviaWrapper">
263+
<div className="trivia-question">
264+
<span className="category">{q.category}</span>
265+
<h2>{q.question}</h2>
266+
<ul className="options">
267+
{q.options.map((option, optIndex) => (
268+
<li key={optIndex}>
269+
<span className="option-letter">
270+
{String.fromCharCode(65 + optIndex)}
271+
</span>
272+
{option}
273+
</li>
274+
))}
275+
</ul>
276+
</div>
277+
</div>
278+
</section>
279+
))}
280+
</>
281+
);
282+
};
283+
284+
export default Trivia202512;

‎src/styles/index.scss‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,3 +58,65 @@ sl-qr-code {
5858
color: rgba(255, 255, 255, 0.59);
5959
}
6060
}
61+
62+
.triviaWrapper {
63+
display: flex;
64+
justify-content: center;
65+
align-items: center;
66+
width: 100vw;
67+
height: 100vh;
68+
padding: 2rem;
69+
box-sizing: border-box;
70+
}
71+
72+
.trivia-question {
73+
color: $black;
74+
text-align: left;
75+
max-width: 900px;
76+
77+
.category {
78+
display: inline-block;
79+
background-color: $orange;
80+
color: $black;
81+
padding: 0.25rem 0.75rem;
82+
border-radius: 0.25rem;
83+
font-size: 0.9rem;
84+
font-weight: 600;
85+
margin-bottom: 1rem;
86+
}
87+
88+
h2 {
89+
font-size: 1.5rem;
90+
margin-bottom: 1.5rem;
91+
line-height: 1.4;
92+
}
93+
94+
.options {
95+
list-style: none;
96+
padding: 0;
97+
margin: 0;
98+
99+
li {
100+
display: flex;
101+
align-items: flex-start;
102+
gap: 0.75rem;
103+
padding: 0.75rem 1rem;
104+
margin-bottom: 0.5rem;
105+
background-color: rgba(0, 0, 0, 0.05);
106+
border-radius: 0.5rem;
107+
font-size: 1.1rem;
108+
109+
.option-letter {
110+
display: inline-flex;
111+
align-items: center;
112+
justify-content: center;
113+
min-width: 2rem;
114+
height: 2rem;
115+
background-color: $gray;
116+
color: $black;
117+
border-radius: 0.25rem;
118+
font-weight: 700;
119+
}
120+
}
121+
}
122+
}

0 commit comments

Comments
 (0)