> For the complete documentation index, see [llms.txt](https://docs.launchboard.app/cxd/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.launchboard.app/cxd/cxd-cross-disciplinary/projects/build-a-flash-card-app-study-guide-for-any-course-1.md). # Build a Flash Card App Study Guide for Any Course ## **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. {% embed url="" %} The video below provides a great introduction to cascading stylesheets (CSS) that will be needed to customize the style of the flash card application.. {% embed url="" %} **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 {% embed url="" %} ### 1. Prepare a spreadsheet table organizing study content for a course * **Determine the topic(s) of study to include in your flash card application.** * **Make a copy of**[ **this template spreadsheet.**](https://docs.google.com/spreadsheets/d/1AB4Uzo_FmIxSywBRJDVsN1D1oghVvLUZ8v-ufUQNCWw/edit?usp=sharing) 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. ### 2. Connect the content to a flash card web application (template) to share publicly * **Create a** [**free Replit account**](https://replit.com)**.** We will use Replit, a browser-based coding platform, to create our flash card application. * **Go to** [**this Replit code for the flash card template**](https://replit.com/@jlyst/Flash-Cards-Template-Experiments-v2) **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.**\ * **Then replace the link in the Replit *****script.js***** file with your link.** You are changing the link in the `spreadsheetLink`variable. 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! ![](https://1554394248-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me5PnfC1YVrQ0BpXcd0%2F-MePexMJdnVOqf-lylX-%2F-MePqKzIv9z6qdo8sr3Z%2Fimage.png?alt=media\&token=84f34627-bb5d-404b-b2cf-30f4c7526905) ### 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.** This is a good reference for the top CSS properties used 👉 W3Schools provides a great reference to the full breadth of CSS properties 👉 ## Advanced Option: Flash Cards with Images Follow the same directions as above but use the following code and spreadsheet templates linked below. * [**Replit.com code template with images folder and updated code**](https://replit.com/@jlyst/Flash-Cards-Template-With-Images-v2#script.js)\ 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. * [**Spreadsheet template with image column**](https://docs.google.com/spreadsheets/d/1651MbLGPnXH4EBNjtnj9o1a0bbhR_sfV5oNGxDrVLBQ/edit?usp=sharing)\ 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) {% embed url="" %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.launchboard.app/cxd/cxd-cross-disciplinary/projects/build-a-flash-card-app-study-guide-for-any-course-1.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.