diff --git a/src/lib/public/quiz/questions/data.ts b/src/lib/public/quiz/questions/data.ts index b5bd86981..88ca582d0 100644 --- a/src/lib/public/quiz/questions/data.ts +++ b/src/lib/public/quiz/questions/data.ts @@ -7,20 +7,20 @@ export const QUIZ_DATA: QuizData = { prompt: 'What is your biggest career interest?', choices: [ { - content: 'Publishing research that will help millions.', - match: TeamMatch.ALGO, + content: 'Leverage algorithms and competitive programming to solve complex problems.', + match: [TeamMatch.ALGO, TeamMatch.ICPC], }, { content: 'Making the next generation of computer intelligence.', - match: TeamMatch.AI, + match: [TeamMatch.AI], }, { content: 'I want to learn every single thing about the web.', - match: TeamMatch.DEV, + match: [TeamMatch.DEV, TeamMatch.OSS], }, { content: 'I love to wow people with the things I create.', - match: TeamMatch.DESIGN, + match: [TeamMatch.DESIGN, TeamMatch.GAMEDEV], }, ], }, @@ -29,19 +29,19 @@ export const QUIZ_DATA: QuizData = { choices: [ { content: 'Talking to digital assitant.', - match: TeamMatch.AI, + match: [TeamMatch.AI], }, { content: 'Solving a 1,000,000 piece puzzle.', - match: TeamMatch.ALGO, + match: [TeamMatch.ALGO, TeamMatch.ICPC], }, { content: "Correcting people's design and art on the internet.", - match: TeamMatch.DESIGN, + match: [TeamMatch.DESIGN, TeamMatch.GAMEDEV], }, { content: 'Making websites/apps.', - match: TeamMatch.DEV, + match: [TeamMatch.DEV, TeamMatch.OSS], }, ], }, @@ -50,63 +50,69 @@ export const QUIZ_DATA: QuizData = { choices: [ { content: 'Optimizing the project.', - match: TeamMatch.ALGO, + match: [TeamMatch.ALGO, TeamMatch.OSS], }, { content: 'The final product interaction.', - match: TeamMatch.AI, + match: [TeamMatch.AI, TeamMatch.DESIGN], }, { - content: 'Creating the project', - match: TeamMatch.DEV, + content: 'Creating the project.', + match: [TeamMatch.DEV, TeamMatch.GAMEDEV], }, { content: 'Planning out the project.', - match: TeamMatch.DESIGN, + match: [TeamMatch.DESIGN, TeamMatch.ICPC], }, ], }, { - prompt: 'What is the coolest sounding language?', + prompt: 'If you could choose one programming language, which would you choose?', choices: [ { - content: 'Julia', - match: TeamMatch.AI, + content: 'JavaScript', + match: [TeamMatch.OSS, TeamMatch.DESIGN], }, { - content: 'Python', - match: TeamMatch.DEV, + content: 'C++/Python', + match: [TeamMatch.ICPC, TeamMatch.ALGO, TeamMatch.AI], }, { - content: 'JavaScript', - match: TeamMatch.DESIGN, + content: 'C#', + match: [TeamMatch.GAMEDEV], }, { - content: 'Assembly', - match: TeamMatch.ALGO, + content: 'Only one? What am i supposed to do with that?', + match: [TeamMatch.OSS, TeamMatch.DEV], }, ], }, { - prompt: "When you are playing a videogame, what get's on your nerves?", + prompt: 'How much collaboration do you prefer when working on projects?', choices: [ { - content: 'The enemies are waaayyy too dumb.', - match: TeamMatch.AI, + content: 'I love working with people!', + match: [ + TeamMatch.GAMEDEV, + TeamMatch.ICPC, + TeamMatch.OSS, + TeamMatch.DESIGN, + TeamMatch.DEV, + ], }, { - content: "I don't like games, they take way too much of my time.", - match: TeamMatch.ALGO, + content: 'I will work with others if asked.', + match: [TeamMatch.GAMEDEV, TeamMatch.OSS, TeamMatch.DEV], }, { - content: 'The game is too unpolished for my taste.', - match: TeamMatch.DEV, + content: 'I would rather work solo.', + match: [TeamMatch.DEV, TeamMatch.ALGO], }, { - content: 'My grandma can draw better on ms paint compared to these graphics.', - match: TeamMatch.DESIGN, + content: 'I do not care.', + match: [TeamMatch.DESIGN, TeamMatch.OSS], }, ], }, @@ -115,20 +121,19 @@ export const QUIZ_DATA: QuizData = { choices: [ { content: 'I will not sleep until this is done.', - match: TeamMatch.ALGO, + match: [TeamMatch.ALGO, TeamMatch.ICPC], }, { content: 'Let GitHub Copilot will finish my project.', - match: TeamMatch.AI, + match: [TeamMatch.AI, TeamMatch.DEV], }, - { content: 'IF IT LOOKS LIKE IT WORKS THEN IT WORKS.', - match: TeamMatch.DESIGN, + match: [TeamMatch.DESIGN, TeamMatch.GAMEDEV], }, { content: 'Yeah it doesn’t matter, we’ll push what we have.', - match: TeamMatch.DEV, + match: [TeamMatch.DEV], }, ], }, @@ -137,40 +142,40 @@ export const QUIZ_DATA: QuizData = { choices: [ { content: 'I fear OOP.', - match: TeamMatch.ALGO, + match: [TeamMatch.ALGO, TeamMatch.ICPC], }, { content: 'What does that mean?', - match: TeamMatch.DESIGN, + match: [TeamMatch.DESIGN], }, { content: 'OOP is necessary.', - match: TeamMatch.DEV, + match: [TeamMatch.DEV, TeamMatch.OSS, TeamMatch.GAMEDEV], }, { content: 'Don’t need it.', - match: TeamMatch.AI, + match: [TeamMatch.AI], }, ], }, { - prompt: 'What is the best ACM team color?', + prompt: 'What is your favorite way to run code?', choices: [ { - content: 'Peaceful Purple', - match: TeamMatch.ALGO, + content: 'On my own machine/on a server', + match: [TeamMatch.GAMEDEV, TeamMatch.OSS, TeamMatch.DEV], }, { - content: 'Emerald Green', - match: TeamMatch.AI, + content: 'In Google Collab', + match: [TeamMatch.AI], }, { - content: 'Electric Blue', - match: TeamMatch.DEV, + content: 'In a JsFiddle', + match: [TeamMatch.DESIGN], }, { - content: 'Precious Pink', - match: TeamMatch.DESIGN, + content: 'On leetcode/kattis/codeforce', + match: [TeamMatch.ALGO, TeamMatch.ICPC], }, ], }, @@ -179,19 +184,19 @@ export const QUIZ_DATA: QuizData = { choices: [ { content: 'Google', - match: TeamMatch.AI, + match: [TeamMatch.AI], }, { content: 'Amazon', - match: TeamMatch.ALGO, + match: [TeamMatch.ALGO, TeamMatch.ICPC], }, { content: 'Apple', - match: TeamMatch.DESIGN, + match: [TeamMatch.DESIGN], }, { content: 'SpaceX', - match: TeamMatch.DEV, + match: [TeamMatch.DEV, TeamMatch.OSS], }, ], }, @@ -200,62 +205,63 @@ export const QUIZ_DATA: QuizData = { choices: [ { content: 'VIM', - match: TeamMatch.AI, + match: [TeamMatch.AI, TeamMatch.DEV], }, { content: 'Google Docs', - match: TeamMatch.ALGO, + match: [TeamMatch.ALGO, TeamMatch.ICPC], }, { content: 'Notepad', - match: TeamMatch.DESIGN, + match: [TeamMatch.DESIGN], }, { content: 'Visual Studio Code', - match: TeamMatch.DEV, + match: [TeamMatch.OSS], }, ], }, { - prompt: 'Why are robots awesome?', + prompt: 'When you hear about a bug in someone’s code you…', choices: [ { - content: 'They can think faster than I do.', - match: TeamMatch.ALGO, + content: 'Suggest “Ask ChatGPT!”', + match: [TeamMatch.AI], }, - { - content: 'They are our successors.', - match: TeamMatch.AI, + content: + 'Break down the problem, and offer three possible solutions before returning to your one-liner', + match: [TeamMatch.ALGO, TeamMatch.ICPC], }, { - content: 'They are quite robust if I do say so myself.', - match: TeamMatch.DEV, + content: 'Say “Damn that sucks” and keep working on making your project beautiful', + match: [TeamMatch.DESIGN, TeamMatch.GAMEDEV], }, { - content: 'THEY LOOK SO DAMN AWESOME', - match: TeamMatch.DESIGN, + content: + 'Sit down and help them solve their problem but complain that they should just use Linux', + match: [TeamMatch.OSS, TeamMatch.DEV], }, ], }, { - prompt: 'What’s your favorite chair?', + prompt: 'How many contributions do you have on Github?', choices: [ { - content: 'Anything will do', - match: TeamMatch.AI, + content: 'Too many', + match: [TeamMatch.OSS, TeamMatch.DEV], }, { - content: 'Herman Miller', - match: TeamMatch.ALGO, + content: 'More than you', + match: [TeamMatch.ICPC, TeamMatch.OSS], }, { - content: 'Yoga Ball', - match: TeamMatch.DESIGN, + content: 'Enough to show off', + match: [TeamMatch.GAMEDEV, TeamMatch.AI, TeamMatch.DESIGN, TeamMatch.DEV], }, { - content: 'GAMING CHAIR', - match: TeamMatch.DEV, + content: 'I keep everything locally', + match: [TeamMatch.ICPC, TeamMatch.ALGO, TeamMatch.AI], }, ], }, @@ -264,19 +270,19 @@ export const QUIZ_DATA: QuizData = { choices: [ { content: 'Water', - match: TeamMatch.AI, + match: [TeamMatch.AI, TeamMatch.DEV], }, { content: 'Soda', - match: TeamMatch.ALGO, + match: [TeamMatch.ALGO], }, { content: 'Boba', - match: TeamMatch.DESIGN, + match: [TeamMatch.DESIGN, TeamMatch.AI], }, { content: 'Coffee', - match: TeamMatch.DEV, + match: [TeamMatch.DEV, TeamMatch.GAMEDEV, TeamMatch.OSS], }, ], }, diff --git a/src/lib/public/quiz/questions/types.ts b/src/lib/public/quiz/questions/types.ts index 1c913ae4d..22302a286 100644 --- a/src/lib/public/quiz/questions/types.ts +++ b/src/lib/public/quiz/questions/types.ts @@ -7,11 +7,19 @@ interface Question { choices: Choice[]; } +export interface QuizResponse { + choiceIndex: number; + matches: TeamMatch[]; +} + export enum TeamMatch { ALGO = 'Algo', DEV = 'Dev', DESIGN = 'Design', AI = 'AI', + OSS = 'OSS', + GAMEDEV = 'Game Dev', + ICPC = 'ICPC', TEAMLESS = 'N/A', } @@ -19,5 +27,5 @@ export interface Choice { content: string; // Where the choice is an index number for use in quiz.svelte // ai => 0, dev => 1, design => 2, algo => 3, N/A => 4 - match: TeamMatch; + match: TeamMatch[]; } diff --git a/src/lib/public/quiz/responses/data.ts b/src/lib/public/quiz/responses/data.ts index ad5df3a32..35b54140a 100644 --- a/src/lib/public/quiz/responses/data.ts +++ b/src/lib/public/quiz/responses/data.ts @@ -1,18 +1,18 @@ import { TeamMatch } from '$lib/public/quiz/questions/types'; export interface TeamReport { - picture: string; - color: string; blurb: string; blurbRecommend: string; recommendations: Array<{ title: string; link: string }>; workshopPictures: string[]; } -export const TEAMS: Record, TeamReport> = { +export function getTeamReport(id: string): TeamReport { + return REPORTS[id as Exclude]; +} + +export const REPORTS: Record, TeamReport> = { [TeamMatch.AI]: { - picture: './assets/ai-logo.svg', - color: 'var(--acm-emerald)', blurb: 'acmAI is focused on introducing Artificial Intelligence and Machine Learning in a beginner friendly way. Workshops are project based and are centered around interactivity. We have a keen eye for problem solving and solution-based programming.', blurbRecommend: @@ -21,8 +21,6 @@ export const TEAMS: Record, TeamReport> = workshopPictures: [], }, [TeamMatch.DEV]: { - picture: './assets/dev-logo.svg', - color: 'var(--acm-bluer)', blurb: 'acmDev aims to have weekly meetings to work on projects as a way to improve our members’ skills at working in groups as well as introduce them to new technologies to make their ideas into software.', blurbRecommend: @@ -36,8 +34,6 @@ export const TEAMS: Record, TeamReport> = workshopPictures: ['/assets/dev-workshop.jpg'], }, [TeamMatch.DESIGN]: { - picture: './assets/design-logo.svg', - color: 'var(--acm-pink)', blurb: 'acmDesign is all about exposing you to the elements of UI/UX. We go over good practices to follow when starting a project, interesting frontend tips, and show that anyone can design.', blurbRecommend: @@ -63,8 +59,6 @@ export const TEAMS: Record, TeamReport> = workshopPictures: ['/assets/design-workshop.jpg', '/assets/quiz/figma-collage.png'], }, [TeamMatch.ALGO]: { - picture: './assets/algo-logo.svg', - color: 'var(--acm-purple)', blurb: "acmAlgo focuses on data structures, algorithms, and technical interview prep. School doesn't give us everything we need and Algo is here to fill in the holes!", blurbRecommend: @@ -72,4 +66,28 @@ export const TEAMS: Record, TeamReport> = recommendations: [], workshopPictures: ['/assets/algo-workshop.jpg'], }, + [TeamMatch.OSS]: { + blurb: + "Our Open Source Software team is all about contributing to open source projects. We're here to help you get started with your first PR and to guide you through the process of contributing to a project.", + blurbRecommend: + 'Get involved in our weekly meetings and start contributing to our projects. Below are some resources to help you get started with open source.', + recommendations: [], + workshopPictures: [], + }, + [TeamMatch.GAMEDEV]: { + blurb: + "acmGameDev is all about creating games and learning about the game development process. We're here to help you get started with game development and to guide you through the process of creating your first game.", + blurbRecommend: + 'Get involved in our weekly meetings and start creating your own games. Below are some resources to help you get started with game development.', + recommendations: [], + workshopPictures: [], + }, + [TeamMatch.ICPC]: { + blurb: + 'The International Collegiate Programming Contest (ICPC) team is all about competitive programming. We compete in regional and international contests and help our members improve their problem-solving skills.', + blurbRecommend: + 'Get involved in our weekly meetings and start practicing for competitive programming contests. Below are some resources to help you get started with competitive programming.', + recommendations: [], + workshopPictures: [], + }, }; diff --git a/src/lib/public/quiz/responses/storage.ts b/src/lib/public/quiz/responses/storage.ts index 5fc336b76..2d2db7a20 100644 --- a/src/lib/public/quiz/responses/storage.ts +++ b/src/lib/public/quiz/responses/storage.ts @@ -1,14 +1,16 @@ +import type { QuizResponse } from '$lib/public/quiz/questions/types'; + export class QuizStorage { constructor( private readonly storage: Storage = window.localStorage, private readonly storageKey = 'QUIZ_RESPONSES' ) {} - setResponses(responses: (string | undefined)[]) { + setResponses(responses: (QuizResponse | undefined)[]) { this.storage.setItem(this.storageKey, JSON.stringify(responses)); } - getResponses(): (string | undefined)[] { + getResponses(): (QuizResponse | undefined)[] { const responses = this.storage.getItem(this.storageKey); return responses ? JSON.parse(responses) : []; } diff --git a/src/routes/(site)/quiz/more-info.svelte b/src/routes/(site)/quiz/more-info.svelte index f8cffb4d2..8c5ce28a8 100644 --- a/src/routes/(site)/quiz/more-info.svelte +++ b/src/routes/(site)/quiz/more-info.svelte @@ -1,16 +1,14 @@ -
- {#if title === 'General'} - img +
+ {#if team.title === 'General'} + img

We are currently not accepting any board member applications...

However

@@ -20,27 +18,27 @@

Chip the Capybara {:else} -

{title} Team

-

{blurp}

- {#if title === 'AI'} +

{team.title} Team

+

{report.blurb}

+ {#if team.title === 'AI'}

Stay Tuned for Events

Coming Soon

- img + img
{:else}

Previous Projects and Workshops

Previous Events

- {#each workshopPictures as picture (picture)} + {#each report.workshopPictures as picture (picture)} {picture} {/each}
{/if}

Get Started Now

-

{blurpRecommend}

+

{report.blurbRecommend}

    - {#each recommendations as recommendation (recommendation)} + {#each report.recommendations as recommendation (recommendation)}
  • {recommendation.title} 0) index--; } @@ -29,8 +32,8 @@ } } - function recordAnswer(match: TeamMatch) { - responses[index] = match; + function recordAnswer(matches: TeamMatch[], choiceIndex: number) { + responses[index] = { matches, choiceIndex }; goRight(); } @@ -55,17 +58,34 @@ showMoreInfo = false; } - $: talliedResponses = (responses ?? []).reduce((tallies, match) => { - match = match?.toLowerCase(); - if (match && tallies[match]) tallies[match]++; - else if (match) tallies[match] = 1; - return tallies; - }, {} as Record); + function tallyResponses(responses: (QuizResponse | undefined)[]) { + return (responses ?? []).reduce((tallies, matches) => { + if (matches === undefined) { + return tallies; + } + + for (let match of matches?.matches ?? []) { + match = match?.toLowerCase() as TeamMatch; + if (match && tallies[match]) { + tallies[match]++; + } else if (match) { + tallies[match] = 1; + } + } + return tallies; + }, {} as Record); + } + + function maxTallies(tallies: Record) { + return Object.entries(tallies) + .sort(([, a], [, b]) => b - a) + .shift() + ?.shift() as TeamMatch; + } + + $: talliedResponses = tallyResponses(responses); - $: match = (Object.entries(talliedResponses) - .sort(([, a], [, b]) => b - a) - ?.shift() - ?.shift() ?? TeamMatch.TEAMLESS) as string; + $: match = maxTallies(talliedResponses); // local storage stuff let quizStorage: QuizStorage | undefined; @@ -88,33 +108,34 @@ {#if !showResults}

    ACM TEAM QUIZ

    +

    Which team are you a part of?

    {data.questions[index].prompt}

    - {#each data.questions[index].choices as choice (choice.content)} + {#each data.questions[index].choices as choice, i (choice.content)} {/each}
    -
    +
    Next
    {:else} -

    Results

    +

    Quiz Results

    You Matched

    {match} Team @@ -157,7 +177,7 @@ fillColor={TEAMS[match].color} />

    - {#each Object.entries(TEAMS).filter(([otherMatch]) => otherMatch !== match) as [otherMatch, team] (otherMatch)} + {#each Object.entries(TEAMS).filter(([otherMatch]) => otherMatch !== match && !excludedTeamIDs.includes(otherMatch)) as [otherMatch, team] (otherMatch)}
    {/each}
    - -

    @@ -224,56 +244,56 @@ } .answers { - display: flex; - flex-direction: column; - gap: 25px; - width: 350px; + display: grid; + gap: 20px; + grid-template-columns: 50% 50%; + width: 700px; } .answers button { - padding: 8px 28px; - min-height: 42px; - background-color: var(--quiz-bg); + padding: 25px 27px; + height: 85px; + background-color: var(--acm-bluer); border-radius: 8px; - border: var(--acm-blue) 3px solid; + border: none; cursor: pointer; transition: 0.25s ease-in-out; } .answers button:hover { - box-shadow: 0px 0px 10px var(--acm-blue); + border: 3px solid var(--acm-sky); } .selected-response { - box-shadow: 0px 0px 15px var(--acm-sky); + border: 3px solid var(--acm-blue); } .selected-response h3 { font-style: italic; - text-shadow: 0px 0px 2px var(--acm-sky); } - .arrow-wrapper { + .back-next-wrapper { display: flex; gap: 30px; } - .arrow { - background: none; - border: var(--acm-dark) 3px solid; - border-radius: 18px; - padding: 8px; + .back-next-btn { + background-color: var(--acm-bluer); + border: var(--acm-bluer) 3px solid; + border-radius: 30px; + padding: 13px 45px; transition: 0.25s ease-in-out; } - .arrow:hover { - box-shadow: 0px 0px 4px var(--acm-dark); + .back-next-btn:hover { + border: 3px solid var(--acm-midnight); } .action-btn { font-weight: 600; font-size: 18px; - padding: 8px 16px; + padding: 10px 30px; + align-items: center; } .action-btn p { @@ -284,7 +304,7 @@ .submitBTN { font-size: 24px; font-weight: 500; - padding: 8px 28px; + padding: 16px 28px; min-height: 42px; background-color: var(--quiz-bg); border-radius: 8px; @@ -302,11 +322,11 @@ } .submitBTN:hover { - box-shadow: 0px 0px 10px var(--acm-blue); + border: 3px solid var(--acm-midnight); } .disable-submitBTN, - .disable-arrow { + .disable-back-next { opacity: 0.5; pointer-events: none; border: none; @@ -341,7 +361,7 @@ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; - gap: 20px; + gap: 35px; } .result-grid-box { @@ -381,21 +401,26 @@ .question { width: 325px; } + .answers button { + height: 90px; + } .answers { - width: 250px; + width: 290px; + height: 450px; + grid-template-columns: 100%; } .result-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; - gap: 20px; + gap: 40px; } .result-grid-box { width: 200px; - height: 150px; + height: 235px; } .fine-text {