AP CSP Create Task Practice Project - Car Quiz (Code.org App Lab)

Overview

This document contains everything needed to run a Create Task practice project in Code.org App Lab: Spec Sheet Pseudocode App Lab Code Teacher Notes 3-Day Lesson Plan 20-Point Rubric

Important: The code below must be run inside Code.org App Lab. Do not use prompt(), alert(), or DOM methods. Create the screens and UI elements with the exact IDs listed in the Spec Sheet.

1) Spec Sheet

Project Title

Car Quiz App (Dropdown + Submit) — AP CSP Create Task Practice

Purpose / User Story

Purpose: Help a user test and improve their knowledge of car safety, maintenance, and basic automotive concepts using an interactive quiz.
User Story: As a student, I want to answer car quiz questions and get immediate feedback and a final score so I can learn from mistakes and improve my understanding.

Inputs

Dropdown selection (INPUT): User chooses an answer in answerDropdown
Button clicks (INPUT): User clicks startBtn, submitBtn, and restartBtn

Outputs

Question text (OUTPUT): questionLabel
Progress display (OUTPUT): progressLabel
Immediate feedback (OUTPUT): feedbackLabel
Final score + summary (OUTPUT): scoreLabel and summaryLabel on resultsScreen

Data Abstraction (List)

The app uses a list (array) of question objects named questionBank. Each object stores the question text, a list of choices, the correct answer index, and an explanation. This list manages complexity by allowing the program to load any question by index rather than hard-coding each question.

Procedure (Student-Developed Function + Parameter)

Procedure: loadQuestion(qIndex)
Parameter: qIndex — the index of the question to display
Use: Displays the question, builds dropdown choices, updates progress, resets feedback. Called at the start and after each submission (2+ calls).

Algorithm (Sequencing + Selection + Iteration)

Sequencing: Set progress → Set question text → Set dropdown options → Clear feedback
Selection: If user answer is correct, increase score; else show correct answer + explanation
Iteration: Loop through the choices list to build dropdown options; loop through results to build summary

Events (UI Event Handlers)

onEvent("startBtn","click", ...) — starts the quiz
onEvent("submitBtn","click", ...) — checks answer and advances
onEvent("restartBtn","click", ...) — restarts the quiz
Optional: onEvent("restartBtnSmall","click", ...) — restart from quiz screen

App Lab Screens + UI Components (IDs)

Screen 1: homeScreen

Label: titleLabel
Button: startBtn (text: “Start Quiz”)

Screen 2: quizScreen

Label: questionLabel
Label: progressLabel
Dropdown: answerDropdown
Button: submitBtn (text: “Submit Answer”)
Label: feedbackLabel
Optional Button: restartBtnSmall (text: “Restart”)

Screen 3: resultsScreen

Label: resultsTitleLabel
Label: scoreLabel
Text Area or Label: summaryLabel (Text Area recommended)
Button: restartBtn (text: “Restart Quiz”)

Testing Plan (5+ Test Cases)

Test Case	Steps	Expected Result
1. Start quiz loads Q1	Click `Start Quiz`	quizScreen shows Question 1; dropdown has 4 options; feedback is blank
2. Correct answer increases score	Select correct option → click `Submit`	Feedback shows Correct + explanation; score increments
3. Incorrect answer does not increase score	Select wrong option → click `Submit`	Feedback shows Incorrect + correct answer + explanation; score unchanged
4. Must select an answer	Leave dropdown blank → click `Submit`	Feedback asks user to select an answer; question does not advance
5. End of quiz shows results	Answer all questions	resultsScreen appears; final score + summary displayed
6. Restart resets everything	Click `Restart Quiz`	Returns to homeScreen; score and index reset; summary cleared

2) Pseudocode

SET score to 0
SET questionIndex to 0
SET resultsLog to empty list

CREATE a list called questionBank that stores question objects:
  question text, choices list, correctIndex, explanation

ON startBtn click:
  score = 0
  questionIndex = 0
  clear resultsLog
  go to quizScreen
  CALL loadQuestion(questionIndex)

PROCEDURE loadQuestion(qIndex):
  display progress "Question (qIndex+1) of total"
  display question text from questionBank[qIndex]
  build dropdown choices using a loop
  reset dropdown selection to blank
  clear feedback

ON submitBtn click:
  userChoice = dropdown value
  IF userChoice is blank:
    display "Please select an answer"
  ELSE:
    correctChoice = choices[correctIndex]
    IF userChoice equals correctChoice:
      score = score + 1
      display "Correct" + explanation
      add a "correct" message to resultsLog
    ELSE:
      display "Incorrect" + correctChoice + explanation
      add an "incorrect" message to resultsLog

    questionIndex = questionIndex + 1

    IF questionIndex < length of questionBank:
      CALL loadQuestion(questionIndex)
    ELSE:
      go to resultsScreen
      display final score
      build and display summary from resultsLog using a loop

ON restartBtn click:
  go to homeScreen

3) App Lab Code (Paste into Code.org App Lab)

Setup Reminder: Create screens and UI elements with the exact IDs listed above. Then paste this code into App Lab’s code area.

/*******************************************************
 Car Quiz App (Dropdown + Submit) - AP CSP Create Task Practice
 Code.org App Lab Compatible

 REQUIRED CREATE TASK ELEMENTS (LABELED BELOW):
  a) DATA ABSTRACTION: list/array (questionBank)
  b) PROCEDURE: student-developed procedure with parameter (loadQuestion(qIndex))
  c) ALGORITHM: sequencing + selection + iteration
  d) INPUT: dropdown + button click
  e) OUTPUT: labels/text area updated with results
*******************************************************/

// ------------------------------------------------------
// a) DATA ABSTRACTION: LIST (manages quiz complexity)
// ------------------------------------------------------
var questionBank = [
  {
    question: "What does ABS stand for in cars?",
    choices: ["Anti-lock Braking System", "Automatic Brake Shift", "Air Balance System", "Auto Boost Suspension"],
    correctIndex: 0,
    explanation: "ABS helps prevent wheels from locking during hard braking."
  },
  {
    question: "Which system reduces harmful exhaust emissions?",
    choices: ["Alternator", "Catalytic Converter", "Radiator", "Starter"],
    correctIndex: 1,
    explanation: "The catalytic converter converts pollutants into less harmful gases."
  },
  {
    question: "What does RPM measure?",
    choices: ["Fuel pressure", "Engine revolutions per minute", "Tire size", "Brake temperature"],
    correctIndex: 1,
    explanation: "RPM tells how fast the engine is spinning."
  },
  {
    question: "What is the main purpose of engine oil?",
    choices: ["Increase tire grip", "Lubricate engine parts", "Cool the headlights", "Strengthen the windshield"],
    correctIndex: 1,
    explanation: "Oil reduces friction and wear between moving engine parts."
  },
  {
    question: "Which drivetrain typically powers the front wheels?",
    choices: ["FWD", "RWD", "AWD", "4WD Low"],
    correctIndex: 0,
    explanation: "FWD stands for Front-Wheel Drive."
  }
];

// ------------------------------------------------------
// Global State Variables
// ------------------------------------------------------
var score = 0;
var questionIndex = 0;

// Stores feedback per question to show a final summary
var resultsLog = [];  // list of strings

// Start on home screen
setScreen("homeScreen");

// ------------------------------------------------------
// EVENTS
// ------------------------------------------------------

// INPUT: start button click
onEvent("startBtn", "click", function() {
  // Reset game state
  score = 0;
  questionIndex = 0;
  resultsLog = [];

  // OUTPUT: move to quiz screen
  setScreen("quizScreen");

  // PROCEDURE call (called multiple times in program)
  loadQuestion(questionIndex);
});

// INPUT: submit button click
onEvent("submitBtn", "click", function() {
  // d) INPUT: read dropdown selection
  var userChoice = getProperty("answerDropdown", "value");

  // Selection: require a choice
  if (userChoice === "" || userChoice === null) {
    // e) OUTPUT
    setText("feedbackLabel", "Please select an answer from the dropdown.");
    return; // stop until valid input
  }

  // Get correct choice from the list
  var correctChoice = questionBank[questionIndex].choices[questionBank[questionIndex].correctIndex];

  // ------------------------------------------------------
  // c) ALGORITHM (inside event logic):
  // Sequencing + Selection
  // ------------------------------------------------------

  // Selection: check correctness
  if (userChoice === correctChoice) {
    score = score + 1;

    // e) OUTPUT: show feedback
    setText("feedbackLabel", "✅ Correct! " + questionBank[questionIndex].explanation);

    // Store for summary
    appendItem(resultsLog, "Q" + (questionIndex + 1) + ": Correct — " + questionBank[questionIndex].explanation);
  } else {
    // e) OUTPUT: show feedback
    setText("feedbackLabel", "❌ Incorrect. Correct answer: " + correctChoice + ". " + questionBank[questionIndex].explanation);

    // Store for summary
    appendItem(resultsLog, "Q" + (questionIndex + 1) + ": Incorrect (You chose: " + userChoice + ") — Correct: " + correctChoice);
  }

  // Move to next question
  questionIndex = questionIndex + 1;

  // Selection: determine whether to load next question or show results
  if (questionIndex < questionBank.length) {
    // PROCEDURE call again (requirement: called at least 2 times)
    loadQuestion(questionIndex);
  } else {
    showResults();
  }
});

// Restart from results screen
onEvent("restartBtn", "click", function() {
  setScreen("homeScreen");
});

// Optional small restart button on quiz screen (if you created it)
onEvent("restartBtnSmall", "click", function() {
  setScreen("homeScreen");
});

// ------------------------------------------------------
// b) PROCEDURE: student-developed procedure w/ parameter
// ------------------------------------------------------
function loadQuestion(qIndex) {
  /*******************************************************
   PROCEDURE: loadQuestion(qIndex)
   PARAMETER: qIndex (which question to display)

   c) ALGORITHM INSIDE THIS PROCEDURE:
   - Sequencing: update progress, question text, dropdown choices, reset feedback
   - Iteration: loop through the choices to build dropdown options
   *******************************************************/

  // Sequencing: update progress + question
  setText("progressLabel", "Question " + (qIndex + 1) + " of " + questionBank.length);
  setText("questionLabel", questionBank[qIndex].question);

  // Iteration: build dropdown options from the list
  var options = [];
  for (var i = 0; i < questionBank[qIndex].choices.length; i++) {
    appendItem(options, questionBank[qIndex].choices[i]);
  }

  // Output: set dropdown options & clear previous selection/feedback
  setProperty("answerDropdown", "options", options);
  setProperty("answerDropdown", "value", ""); // reset selection
  setText("feedbackLabel", "");
}

// ------------------------------------------------------
// Results Screen Function
// ------------------------------------------------------
function showResults() {
  setScreen("resultsScreen");

  // e) OUTPUT: final score
  setText("scoreLabel", "Final Score: " + score + " / " + questionBank.length);

  // Iteration: build summary from resultsLog
  var summaryText = "";
  for (var i = 0; i < resultsLog.length; i++) {
    summaryText = summaryText + resultsLog[i] + "\n";
  }

  // e) OUTPUT: show summary
  setText("summaryLabel", summaryText);
}

4) Teacher Notes (Brief)

Where students can take screenshots

List (Data Abstraction): Screenshot the questionBank array.
Procedure: Screenshot function loadQuestion(qIndex) showing the parameter.
Algorithm: Screenshot inside loadQuestion showing the loop (iteration) and sequencing. Also screenshot the if/else in the submit handler (selection) if you want a clearer selection example.

Student-friendly explanations (adapt for written responses)

Data Abstraction (list):
“My program uses a list called questionBank that stores each question, answer choices, the correct answer index, and an explanation. Using a list lets my program display questions using an index instead of writing separate code for each question. This reduces repetition and makes updates easier.”

Procedure (with parameter):
“My program includes a procedure loadQuestion(qIndex) that takes an index as a parameter. It loads the question text and builds the dropdown choices for that question. I call this procedure multiple times to show the next question after each submission.”

Algorithm (sequencing, selection, iteration):
“The algorithm uses sequencing to show the question, load choices, and reset feedback in order. It uses iteration with a loop to build the dropdown choices and to create the final summary. It uses selection with an if/else to determine whether the user’s answer is correct and update the score and feedback.”

5) 3-Day Lesson Plan

Day 1 — UI + Data (Build & Load Questions)

Create 3 screens and UI elements with the IDs in the spec sheet.

Exit Ticket: Screenshot questionBank and loadQuestion(qIndex).

Day 2 — Algorithm + Score (Selection + Progress)

Add submitBtn event handler.
Validate dropdown selection (must choose an answer).
Use if/else to check correctness and update score.
Advance questionIndex and call loadQuestion() again.
Append results into resultsLog for final summary.

Exit Ticket: Screenshot the if/else correctness check.

Day 3 — Results + Testing Evidence + Mini Write-up

Implement showResults() to display score and summary.
Add restart functionality.
Complete at least 5 test cases and record expected vs actual results.
Practice 3 short written responses (list, procedure, algorithm) using the sentence starters.

Exit Ticket: Testing table + 3 screenshots (list, procedure, algorithm).

4) Teacher Notes (Brief)

Where students can take screenshots
• List (Data Abstraction): Screenshot the questionBank array.
• File name is PX_AP_CSP_Create_lastname.png
• Procedure: Screenshot function loadQuestion(qIndex) showing the parameter.
• File name is PX_AP_CSP_Create_Parm_lastname.png
• Algorithm: Screenshot inside loadQuestion showing the loop (iteration) and sequencing.
Also screenshot the if/else in the submit handler (selection) if you want a clearer selection example.
• File name is PX_AP_CSP_Create_loop_lastname.png
***** Drop off all 3 image into google classroom ****
******** Share your App with Mr. Cusack for his verification ******
******** He will provide you with a secret word ************

6) 20-Point Rubric (Create Task Aligned)

Category	Points	Full Credit Criteria
Program Purpose	2	Clear purpose and user can complete quiz start-to-finish
Input / Output	3	Dropdown + button input; outputs feedback + score + summary on screen(s)
List Abstraction	3	Meaningful list stores multiple questions/choices and drives program logic
Procedure w/ Parameter	3	Student-developed procedure has a parameter, is called 2+ times, and affects output
Algorithm (Seq/Select/Iterate)	4	Evidence of sequencing + if/else + loop iteration in procedure and/or main logic
Testing Evidence	3	At least 5 tests with expected vs actual results documented
Code Readability / Comments	2	Clear variable names and comments labeling Create Task elements
Total	20