Skip to main content

Lab 4: Vue.js

due in-class Friday, Feb 12th at 10:50AM, accepting submissions until Wednesday, Feb 17th 10:00AM


Before starting this lab, ensure that you have:


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

  1. 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]
  2. 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
  3. Use the provided inputs to fill in for the substitutions and produce the output MadLib
    This is a fluffy bird

Part 1: Sketch

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.


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.

  1. Make the MadLib look good (add CSS!).
    • You can make use of sample.html to test your styling.
  2. The stencil code we have provided will pick the next Madlib sequentially. Rewrite it to fetch Madlib randomly instead.
  3. List title and author along with each Madlib.

Optional Tasks

  1. Indicate missing items if the user tries to submit without all words filled in.
  2. Handle multiple paragraph madlibs (need to find multiple new lines and replace with paragraph indicators and use html() rather than text()).
  3. Allow user to choose a different madlib from input page.
  4. 2-Person mode: Update the Madlib dynamically as the user keys in the input.
  5. Change the Vue code to use Vue component
  6. 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.