Skip to main content

Homework 2: Vue.js Prototyping Practice

In this homework you'll practice using Vue.js (version 3 + composition API) to create a drum simulator app prototype.

info

The course material needed to complete this assignment was covered in classes 3-5.

Learning Objectives​

  • Compartmentalize functionality into components.
  • Use props to pass data from parent to child components.
  • Use events to pass data from child to parent components.
  • Use reactive variables to store and update state.
  • Use the v-for directive to render lists of elements.
  • Use watchers to react to changes in reactive variables.
  • Use conditional rendering to render elements based on state.
  • Use conditional styling to style elements based on state.
  • Emit events from child components to parent components.
  • Watch reactive variables in child components to react to changes in state.

Help & Support Resources​

We want you to get the help and support you need. Use the course's support resources for help with this assignment.

Git Repository & Codespace​

  1. Create your assignment repository.

    Visit https://landrace.infosci.cornell.edu/courses/info4340-2026fa/repos/hw2 in your browser to create your assignment repository.

  2. Open your assignment repository in GitHub.

    After creating your repository, visit https://landrace.infosci.cornell.edu/courses/info4340-2026fa/repos/hw2 in your browser and follow the link to open the repository on github.com

  3. Open your assignment repository as a codespace.

Submission Requirements​

Professionalism

Professionalism means meeting the client's requirements. Not doing less and not doing more.

Your submission should meet the requirements specified for this assignment and no more (or less). If you do more than the requirements, you will receive a 0 for the assignment. If you do less than the requirements, you will receive a 0 for the assignment.

Your assignment should meet the following requirements for credit:

  • Submit your own original work (design and code) for this assignment.

    No credit is provided for submitting design and/or code that is taken from the course-provided examples.

  • Your code should be original. However, the structure of the code will mirror the class examples.

    The structure of your code will align with the class examples. This is to be expected.

  • You are required to use the methods and techniques covered in class.

    Important

    No credit is provided for using methods that are not covered in this class.

    You may not use any methods that have not been covered in class prior to the release of this assignment.

  • Your assignment's prototype should be visible in the browser and functional upon launching the development web server using Run Without Debugging.

    If your assignment does not launch using this method or is not visible in the browser after launching the development server, we are unable to provide any credit.

  • All files should be in the location specified in this document for credit.

    Professionalism is important. Incorrectly placed files will not be graded; no partial credit is provided either.

  • Follow the submission instructions below.

    Submit all materials to your GitHub repository's main branch for this assignment. When you're finished stage, commit, and push your submission to GitHub. Then fill-out the submission form to complete your submission.

    Failure to complete the submission form will result in 0 credit; no submission form = no submission. No leniency. No exceptions.

Sprint 1: An Unstyled Working Drum Simulator​

Credit: ~30 points. Completion credit provided for meeting the requirements below. No partial credit is provided.

For your first sprint, you will create an unstyled, but functional drum simulator app prototype.

Requirements​

Create a drum simulator app prototype that meets the following requirements:

  • Your simulator should have at least 4 audio samples (e.g. "Kick", "Snare", "Hi-Hat", "Cymbal"), but no more than 8 audio samples.

    • You may use the provided audio samples (/public/samples) or you may use your own samples. (If you use your own samples, the files should be included in your submission repository; no credit for hotlinked samples.)
    • You may select any samples you like, but they should be appropriate for a drum simulator.
    • Adding a new sample should only require modifying a single array of samples. (If your samples are hard-coded in your template, you will receive 0 credit for this sprint.)

  • Render each sample as a row of buttons.

    • Label the row, so that the user knows which sample is represented by that row of buttons.

  • For each sample, render exactly 4 buttons to represent 4 beats/steps.

    • Render the buttons in a grid-like layout, with each sample's buttons in a row.
    • Next to each sample label, render 4 buttons (in 4 columns) that represent the 4 beats/steps for that sample.
    • When a sample's step button is clicked, that sample is "on" for that step. When the button is clicked again, that sample is "off" for that step.
    • Minimally style the buttons to indicate whether they are "on" or "off" (e.g. a different background color for "on" vs "off").

  • Implement a play/pause button that plays the drum simulator's sequence of samples in a loop.

    • Play the first "column" of buttons (the first step for all samples), then the second column, then the third column, then the fourth column, and then repeat from the first column.
    • When a "column" of samples is playing, visually indicate which column is currently playing (e.g. by highlighting the buttons in that column).
    • If the play/pause button is clicked while the simulator is playing, the simulator should pause and stop playing the sequence of samples.
    • A step's duration should be about 350 milliseconds (ms) per step. Use a setInterval to implement this functionality.
    • The audio play functionality (i.e. new Audio(sampleFile).play()) should be implemented in the SampleButton component, not in the App component.

  • Your prototype should be largely unstyled.

    • You may use CSS grid or flexbox to render the "grid" of samples, however everything else should be unstyled for this sprint.
    • You may minimally use styling to indicate whether a sample button is "on" or "off" (e.g. a different background color for "on" vs "off").
    • You may minimally style the currently playing column of buttons (i.e. by highlighting the buttons in that column).
    • If your prototype is mostly styled for this sprint, you will receive 0 credit for the entire sprint. No exceptions. No leniency.

  • You may only use the methods covered thus far in class (classes 2-5) to implement your prototype.

    • You may only use Vue.js (version 3) and its composition API to program your prototype. (These are the methods covered in class.)
    • For credit, your prototype should use each of the methods we covered in class. (See the list below.) Yes, you need to each of these methods to receive credit for this sprint. No exceptions. No leniency.
    • You may create your own components, pass props, use reactive variables, bind props to reactive variables, handle events, emit events, conditionally render using v-if, conditionally style elements using :class bindings, use the v-for directive to render lists of elements, and employ watchers to react to changes in reactive variables.
    • 0 credit is provided if any other methods are used to implement your prototype. No exceptions. No leniency.

Instructions​

danger

While you may use AI to complete this assignment, remember the purpose of these assignments is to practice the material from class. You will be asked to do something very similar in your first oral exam. In that exam you will not be permitted to use AI in any capacity.

You are highly encouraged to complete this assignment yourself without using AI. Doing so will help you learn the material and prepare for your first oral exam.

tip

This assignment has been designed so that the simplest solution requires that you use each of the Vue.js methods we've covered in class.

If you find yourself stuck, review your code from the class activities and try and apply those ideas to this problem.

  1. Create a SampleButton component that represents a single sample's step button.

    Each sample button should know the sample file it represents (i.e. /samples/snare.ogg).

  2. In the App component, create an array of samples (i.e. sample file names). Use this list, to render the label for each sample, and additionally render a list of 4 SampleButton components for each sample (in a row).

  3. In the App component, remember the state of each sample's step button (i.e. whether it is "on" or "off") as a 2D array.

    A prop should be passed to each SampleButton component to indicate whether that button is "on" or "off".

    When a sample button is clicked, update the state of that button in App's 2D array.

  4. Implement the play/pause button in the App component.

    When the play button is clicked, use a setInterval to play each column of samples in sequence (i.e. first column, second column, third column, fourth column, then repeat).

    When the pause button is clicked, stop the setInterval and stop playing the sequence of samples.

    Use the code to implement the play/pause functionality:

    const STEP_COUNT = 4
    const STEP_DURATION = 350 // ms between steps

    const currentStep = ref(-1)
    let timer = null

    function startPlayback() {
        currentStep.value = 0
        // TODO: play the step (i.e. play the samples that are "on" for that step)
        timer = setInterval(() => {
            currentStep.value = (currentStep.value + 1) % STEP_COUNT // loop back to the first step after the last step
            // TODO: play the step (i.e. play the samples that are "on" for that step)
        }, STEP_DURATION)
    }

    function stopPlayback() {
        currentStep.value = -1
        clearInterval(timer)
        timer = null
    }

    (You are required to use this code. You may not use any other methods to implement the play/pause functionality.)

  5. A SampleButton should always be notified from App whether it's currently "playing". The SampleButton should watch whether it's currently "playing" and play its sample if its status changes to "on".

    You may use the following code to play a sample file:

    const audio = new Audio(sampleFile)
    audio.play()

  6. When a step is playing, visually indicate which column of buttons is currently playing (e.g. by highlighting the buttons in that column).

Submission​

Stage, commit and push all changed files in your Git repository to the GitHub server. (All commits should reside on the main branch.)

Complete the submission form for hw2, sprint1 to submit the assignment.

note

The submission form asks you to check your submission. Checking your work will ensure you receive credit for this assignment. We ask you to check your submission because this is where some students lose points. It's easy to forget something and checking your work prevents the heartache of getting a 0 because your submission wasn't submitted in a way that we can access and grade it.

Sprint 2: A Styled Working Drum Simulator​

note

This sprint will be released at a later date.

You may not work ahead. Your sprint 1 should be largely unstyled for credit.

Contributors​

Copyright © 2026:

  • Kyle Harms
  • Axel Bax
Last updated on