Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
A repository of Cross-disciplinary project guides for middle school and high school classrooms.
Project Guide
Description
Proposing Solutions in Computing
Students investigate a problem, defining the key stakeholders and identifying the opportunities for improvement with computing technologies. Students will then generate proposals for presentation.
Business, Design, and Language Arts
Sketching and Prototyping in Computing
Students envision a new mobile application through sketches and generate a dynamic prototype (without coding) to evaluate their idea.
Engineering Design, Drawing and Art
Product Evaluation in Computing
Students conduct a careful study of an existing computer/phone product for usability and user experience. Students will synthesize a report or presentation to share their findings and recommendations.
Business, Design, Language Arts
CS for Math & Science: Charting Data
Students process and prepare data for visualization with a combination of spreadsheets and graphics software.
Math, Science, and Engineering
CS for Language Arts: Use Machine Learning to Analyze Writing
Students experiment with natural language processing techniques to analyze writing and evaluate the value and risk it brings.
Language Arts and Social Sciences
Build a Flash Card App Study Guide for Any Course
Students input course content for a flash card application and then style it for a fun and engaging experience.
Any Subject
For this project you will prepare a proposal for a new concept that uses computing to solve a problem — much like an entrepreneur pitching a start-up idea or an employee (intrapreneur) presenting a new product idea inside their company.
While this project will focus on the research and conceptualization of an idea, the video below provides a broader overview of user experience design, including the research and evaluation components of the domain. This will provide a good context to think about the skills needed for this project.
The video below provides an introduction to the internet of things (IoT). This will help you think broadly about the possible applications of computing that goes well beyond desktop computers and phones, helping you get the creative juices going.
It is important to determine the current context of a problem. Who are the stakeholders and what are the current outcomes? What is the narrative that explains how are they are attempting to solve the problem?
Proposing a solution requires you to 1) analyze the current state of the problem, 2) create several ideas for improvement, and 3) deliver the most appropriate solution as a proposal.
Investigate a problem and its context
Define the key stakeholders regarding the problem
Identify opportunities for improvement using computing technologies
Generate a proposal that thoughtfully presents the case for a particular solution to the problem.
Start with a problem topic (likely provided by your teacher) and investigate the details of the problem. You can do this through online research, interviews, surveys, and focus groups. Gather the following information.
Who are the key stakeholders regarding the problem? A stakeholder is anybody that is affected by the problem. If we consider the problem of heart disease, for example, the patient is a clear stakeholder — but we should also consider health professionals, family members, friends, etc.
What are the current methods of solving the problem and the outcomes? This is the competition, in essence, for any solution you develop. What are the detailed steps in the current methods? How well do the current methods work (outcomes)? Be specific on any shortcomings in the current methods.
What is a succinct definition of the problem in a sentence or two?
Consider how computing technologies can be leveraged to solve the problem in a more efficient and effective way. Remember, computers are used in much more than phones and laptops. Smart devices of all types are fair game as you brainstorm ideas. Your concept doesn't have to be a physical product necessarily. It could be an idea for a computer algorithm that process data in a useful way, or it could be a media campaign to raise awareness on a topic on a big scale. Follow these steps as you develop ideas.
Make a long list of ideas. You want a diverse set (wide range) of ideas. Don't judge ideas just yet, especially if you are working in a team. Give all your ideas time for consideration without shooting them down critically.
Synthesize (mix) ideas. Reflect on all the ideas, make connections between ideas, and consider new variations by synthesizing ideas.
Determine the best idea and develop a value proposition. What is the elevator pitch for your solution? Develop a succinct value proposition that explains the problem, a key stakeholder, and the benefit the solution brings. Here is a template to get you started: For [describe target users] who [describe problem or need], [name of product] is a [describe type of product] that [describe benefit or value].
Example Value Proposition: For teachers who struggle with taking attendance all day or find it disruptive to the beginning of class, Attendance Checker is a device that will help make attendance easier for every class period of the day where students initiate the check-in as they enter the classroom.
Prepare a presentation to propose your concept and the background work you completed. Include the following elements (at a minimum) in your proposal.
Solution Title and Contributors
Background on the Problem Provide a clear description of the problem context — include stakeholders, current methods used to solve the problem, and importance of the problem. Be sure to site your sources of information and any data you incorporate. ★ If you made a persona, it would be a great visual to share here.
Breadth of Ideas Considered Provide a quick summary of the ideas considered in an easy-to-view visual.
The Value Proposition Provide a succinct and convincing value proposition and be prepared to explain the proposed idea in more depth. Also, prepare a prompt (or two) to get feedback from your audience on your proposal. Image that you are going to then invest time in developing it further.
For this project you will evaluate an existing phone or computer application and develop a set of recommendations for improvement — much like a user experience researcher would do to incrementally improve a product or service.
While this project will focus on user experience evaluation, the video below provides a broader overview of user experience design, including the research and evaluation components of the domain. This will provide a good context to think about the skills needed for this project.
Below are two common ways to consider documenting a task analysis. One is tabular and the other is a diagram. No matter which method you choose it is important to capture the details of each step a person takes in completing the task. It is a good idea to go through each step and generate notes on any important features or potential problems along the way.
Below is a great checklist to use when evaluating the usability of a product or service.
Conduct a task analysis of an existing computer/phone product
Complete a systematic review of the product's usability
Develop a set of recommended improvements for the product
Synthesize a report or presentation to share their findings and recommendations.
Choose a computer application (mobile or desktop) that you will evaluate for a couple tasks. Find an application that has two tasks, each requiring at least three steps.
Document a detailed step-by-step description of the tasks in a table or diagram format.
Capture screenshot images for each step.
Review each step in your analysis and record notes on any important features or potential problems along the way.
Go through each item in the usability checklist and note any room for improvement with the tasks.
Based on your evaluation generate a list of improvements to consider, no matter how small or large.
Review your improvement list and identify the top two changes that would provide the most benefit. Consider the effort needed to make the change as well.
Generate a presentation that summarizes your evaluation and the recommended improvements. Include the following elements in your report.
Title of Project and Contributors
Description of the application evaluated
Screenshots of the application
The table or diagram of the task analysis
A description (text, annotated images, or sketches) of the proposed improvements to be made.
A prompt for the audience to provide feedback on your report.
For this project you will sketch interfaces of a mobile or desktop application and generate a functional prototype to share with others for feedback — much like a product designer would do to test ideas.
While this project will focus on user experience prototyping, the video below provides a broader overview of user experience design, including the research and evaluation components of the domain. This will provide a good context to think about the skills needed for this project.
The video below provides a great overview of prototyping, including the tools and techniques used.
The video below provides pointers on how to sketch particular components, like buttons and form fields, that are efficient and easy to understand.
Envision a new mobile application interface
Sketch an interface concept with multiple screens
Generate a dynamic (functional) prototype (without coding)
Evaluate the concept through feedback from others
While you could create a fully new mobile app concept, we recommend that you choose an existing mobile app and re-imagine the interface and interactions for a particular task. For example, you could redesign the interaction sequence for adding emojis to a messaging app, or redesign the interaction sequence for accessing favorite destinations on a phone map application.
Determine which mobile app you will prototype with a slight modification.
Describe the modification you intend to make and why it may be an improvement. Try to come up with an interaction sequence that will require you to sketch three unique screen views. For example -- 1) a sketch of a messaging app screen with an empty message field, 2) on the user tap of an emoji icon, a sketch of the screen having an overlay of emojis to choose from, and 3) on the user tap of a particular emoji, a sketch of the inserted emoji in the message field.
Interface prototypes can be created with hand sketches, digital pen drawings, online wire-framing tools, or advanced graphics software. For this exercises we recommend hand sketching for it rapid and easy-to-use benefits.
Sketch the screen views that represent the sequence of the interaction with the level of detail, style, and color required by your teacher. You can draw them on paper or a white board. Consider using a template like the ones found here to help get the aspect ratio right and to keep features aligned.
There are many software tools available to help with prototyping interactions, but we recommend https://marvelapp.com and the partner mobile app as an easy-to-use tool for creating a dynamic prototype.
Create a new project in Marvel App for your prototype.
Take some nice photos of your sketches to be imported into Marvel App. You can take regular snapshots and import them into the browser-based version of Marvel App or use the mobile app to get photos in directly.
For each sketch, create the hotspots (or other options) that will link the screens together to simulate the app interaction. You can decide which options to use to fine tune the interactions -- like slides or fades.
Now you want to share your prototype with others to have them use it (tap through the screens) and get feedback on the concept.
Find at least five people to use your prototype to get feedback. Consider finding a diverse set of people to give you feedback. For example, consider using classmates, friends, and family members of all ages.
Using the shareable link to your project in Marvel App or your own phone, have your participants try out your prototype. Give each person an introduction to your project and explain that you are testing the interface concept, not their abilities. This will help set them at ease and not feel like your are testing them.
Summarize your key findings and be prepared to share the results and potential improvements you could make to the concept.
Conduct a demonstration of your prototype with your class and present your summary of the evaluation results.
For this project you will use machine learning tools to evaluate the sentiment of reviews on an article, story, or movie. You will also use machine learning tools to evaluate a question and answer application. These evaluation will give you an experience much like a natural language processing (NLP) researcher might do to evaluate the validity of an artificial intelligence product.
This video gives a quick introduction to NLP and the breadth of applications.
The article below goes into a lot of depth, but reading up to, and including, the section "What are Word Embeddings?" provides a good introduction.
Prepare text to be processed with natural language processing
Analyze the text using sentiment analysis and/or sentence encoding techniques
Evaluate the results for the potential value and risk it brings
We want to prepare two pieces of text for this project.
A Collection of Reviews on a Work - This can be simple movie reviews, book reviews, or article reviews. You can collect reviews yourself using a Google form, for example. Your collection doesn't have to be huge. Twenty, or so, reviews collected in a simple document will work great for this project. We will use this to experiment with sentiment analysis, to determine if each comment is positive or negative.
A Short Body of Text for Automating Questions and Answers - This can be a short story, company descriptions, or brief article. We will use this text to create an automated question and answer application, where the computer will attempt to answer a user's question based on the source text.
Evaluate the Sentiment Analysis
Performance: How accurate was the analysis? Did the algorithm do a good job? What seems to give it problems? Write a short summary of your findings.
Applications: What would be some appropriate applications of this technology? What might be some less appropriate uses for it?
Evaluate the Question and Answer Tool
Performance: How accurate was the answers? Did the algorithm do a good job? What seems to give it problems? Write a short summary of your findings.
Applications: What would be some appropriate applications of this technology? What might be some less appropriate uses for it?
Prepare a Presentation of Your Project In addition to the evaluation summaries, include a summary of the source texts you used and samples of the results from the NLP tools.
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
Determine the topic(s) of study to include in your flash card application.
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!
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.
Follow the same directions as above but use the following code and spreadsheet templates linked below.
This would be a great time to create a persona, like the one shown below.
Evaluate the ideas. Now consider each idea using a risk/benefit analysis — or simply, what provides the most "Bang for your buck". Estimate how much value ("bang" or "benefit") it can bring and how much effort ("buck" or "risk") it might take to implement. You could create a two-axis chart to visualize each idea on benefit and risk. Also, consider how it helps all the stakeholders. Below is an example of a mapping ideas on two axis for contemplation. You can choose what each axis represents.
Edit and re-do sketches, several times if needed, to fine tune the concept. That is the power of hand sketches, you can create multiple versions rather quickly. Below is an example of rough sketches.
Test the interaction simulation and refine the sketches as needed.
Sentiment Analysis Use to complete a sentiment analysis on your collection of reviews. Once your process the reviews, copy the results of the analysis into a text document for your own records.
Automated Question and Answer Use to conducted an experiment of automating answers to questions about your chosen body of text. Prepare at least 7 questions about the body of text and record the provided answer for each question.
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)
For this project you will collect or generate some data and create a set of charts to include in a web-based report on the data — much like a data scientist may do to communicate data findings.
Generate or collect data on a topic or from an experiment
Process and prepare the data for visualization
Design a custom report with charts
Program the dashboard for public access through the web
Your first step is to collect your data. This can be data you download from the internet, data you collected in a science lab, or data you generated in a spreadsheet based on mathematical formulas. You want to have enough data to generate two or three charts for your report.
Review and clean the data as needed in a spreadsheet. Create a simple table(s) of your data in a spreadsheet and make sure the formatting is consistent and there are no missing data points etc.
Export each data table to a CSV (Comma Separated Values) file. This is a common export feature in spreadsheets. Ensure that the column labels are the first row and that the remaining rows are data from your table.
Review the data you have and determine the appropriate chart types to use. Will your tables require bar charts, scatter plots, line charts, histograms, or pie charts?
Create a free Replit account for programming your report.
Modify the template code for one of the charts to use your data and the appropriate chart type. This will take some time and trial-and-error! Once you are successful, repeat the process for the rest of your data.
Fine-tune the formatting of your charts.
Modify the text in the HTML with your chart descriptions and headings.
Share your report with five people for a quick review and feedback. Make improvements as needed.
Great job!
Programming Reference Material
This will be challenging, but use the reference material found here to troubleshoot and make customizations to your charts.
Generate a quick sketch outlining your report layout. This does not have to be fancy. It can be a quick sketch that communicates the overall design idea and useful for conversation, like the one below.
Create a fork (copy) of this report template. Once you click "Run" you should see the screen shown below.
Upload your CSV files to your Replit workspace. Pie charts and donut charts will not work with any zero values. It is a current bug in the RoughViz library. The work around is to replace any zero values with 0.000001 or similar. Other chart types should work fine with zero values.