Setup

Before starting this lab, ensure that you have:

Accept the Github Classroom assignment and clone this repo that contains stencil code for lab 4.
Goto Google Jamboard.

Overview

Now that we've reviewed the fundamentals of Vue in the prelab, we will create another game: MadLibs .

It is a phrasal template word game, starting with a string which includes blanks for substitutions (the words in brackets)
This is a [adjective] [noun]
Choose an appropriate word for each substitution that satisfies the grammatical rule(s). For example, here are a set of words for the given MadLib:
- Adjective : fluffy
- Noun : bird
Use the provided inputs to fill in for the substitutions and produce the output MadLib
This is a fluffy bird

Part 1: Sketch

Create a Google Jamboard and share it with your team.

If you would like to opt out of using Jamboard, you can draw on a piece of paper and upload a photo of the result (although collaboration may be more difficult with this method).

Design your Madlibs game!
Export your Jamboard sketch as a PDF and upload it to Gradescope using this link.
- One member from the group should submit the design and ensure that your group members are included in the Gradescope submission. Do this by clicking "View and edit group" and select your group members.

You will be returning to the main class session before rejoining your Breakout Room to complete the next step of the lab.

Part 2: Code

Stencil Structure

The stencil code we have provided has a basic skeleton for Madblibs and it should help you get started with.

index.html contains the stencil for Madlib.
madlibs.js contains a list of Madlibs.
madlibcode.js contains utility functions that you can use to build Madlibs game.
madlibs.css CSS for styling index.html
sample.html contains a sample Madlib sketch that you can use to test stylings.

Tasks

Your job in this lab will be to create a fully formed Madlib game. You will update index.html with Vue logic to build a functional Madlib game.

Make the MadLib look good (add CSS!).

You can make use of sample.html to test your styling.

The stencil code we have provided will pick the next Madlib sequentially. Rewrite it to fetch Madlib randomly instead.
List title and author along with each Madlib.

Optional Tasks

Indicate missing items if the user tries to submit without all words filled in.
Handle multiple paragraph madlibs (need to find multiple new lines and replace with paragraph indicators and use html() rather than text()).
Allow user to choose a different madlib from input page.
2-Person mode: Update the Madlib dynamically as the user keys in the input.
Change the Vue code to use Vue component
Add keyboard navigation - Pressing "enter" key should take the user to the next input instead of submitting.

UI sample

After completing this lab, you should have a webpage that have functionalities resembling this: screenshot of TA solution to madlib game We are not grading on how your page looks like so feel free to get creative.

Handin Instructions

Hand in your code for this lab via Gradescope. Please create a zip file of the stencil code root directory and hand in this zip file in your handin. Only one team member should upload their local version of the code and then assign group members after submission.

Lab 4: Vue.js