CxD Archive
CxD Cross-Disciplinary
CxD Cross-Disciplinary
  • Summary of Cross-Disciplinary Projects
  • PROJECTS
    • Proposing Solutions in Computing
    • Sketching and Prototyping in Computing
    • Product Evaluation in Computing
    • CS for Math & Science: Charting Data
    • CS for Language Arts: Use Machine Learning to Analyze Writing
    • Build a Flash Card App Study Guide for Any Course
Powered by GitBook
On this page
  • Introduction and Background
  • Instructions
  • 1. Prepare a spreadsheet table organizing study content for a course
  • 2. Connect the content to a flash card web application (template) to share publicly
  • 3. Style the application for a fun and engaging experience using Cascading Style Sheets
  • Advanced Option: Flash Cards with Images
Export as PDF
  1. PROJECTS

Build a Flash Card App Study Guide for Any Course

PreviousCS for Language Arts: Use Machine Learning to Analyze Writing

Last updated 2 years ago

Introduction and Background

For this project you will prepare content for a flash card application and style the application, creating an engaging experience for other students to review study material — much like a product designer would do to create a fun experience with a product.

The video below provides a great introduction to cascading stylesheets (CSS) that will be needed to customize the style of the flash card application..

Student objectives:

  • Prepare a spreadsheet table organizing study content for a course

  • Connect the content to a flash card web application (template) to share publicly

  • Style the application for a fun and engaging experience using Cascading Style Sheets

Subject Areas: Computer Science and Any Subject

Instructions

1. Prepare a spreadsheet table organizing study content for a course

  • Determine the topic(s) of study to include in your flash card application.

2. Connect the content to a flash card web application (template) to share publicly

  • Then replace the link in the Replit script.js file with your link. You are changing the link in the spreadsheetLinkvariable. See the image below for reference.

  • "Run" your Replit application once you have made this change and make sure the flash card application works as expected. If so, you are all set up with your flash card application!

3. Style the application for a fun and engaging experience using Cascading Style Sheets

As you update your spreadsheet with terms and definitions, you can begin to style your flash card application in the style.css file on Replit. Make some simple changes to color, for example, to start. Then you can dive into more advanced changes. Ultimately, you want to provide a fun and engaging experience that is appropriate for the content.

Advanced Option: Flash Cards with Images

Follow the same directions as above but use the following code and spreadsheet templates linked below.

Make a copy of You can begin to replace the terms and definitions to reflect your topic of study, but you can always come back to this for editing since it will be a live database for the flash card application.

Create a . We will use Replit, a browser-based coding platform, to create our flash card application.

Go to and fork it (i.e. make a copy). You can rename the code workspace how you like. Try it out by clicking "run" to make sure the template works as expected.

"Publish to Web" your Google Spreadsheet and copy the link using the CSV option.

This is a good reference for the top CSS properties used 👉

W3Schools provides a great reference to the full breadth of CSS properties 👉

In the images folder upload the images you will use on the flashcards. Be sure they are of a common image type, like .png or .jpg.

Under the image column add the filename of the image that belongs with that term and definition. Be sure to just use the filename along with the extension (for example myPic.jpg or myPic.png)

this template spreadsheet.
free Replit account
this Replit code for the flash card template
https://lucidar.me/en/web-dev-class/lesson-2-09-most-used-css-properties/
https://www.w3schools.com/cssref/default.asp
Replit.com code template with images folder and updated code
Spreadsheet template with image column