Assignment #9 - Animal Slideshow

Specification of Assignment

Refresh this page constantly as we answer your questions from Piazza and clarify the requirements

In this assignment, you will develop a program that displays a slideshow of animal pictures, allowing users to navigate between images and interact by liking or disliking each picture. Using recursive functions. The slideshow should include five pictures using the URLs to the images that I provided below. You cannot use your own pictures or downloaded files.

• https://profdiazh.github.io/cs101/static_files/assignments/09_slideshow/cow.png
• https://profdiazh.github.io/cs101/static_files/assignments/09_slideshow/frog.png
• https://profdiazh.github.io/cs101/static_files/assignments/09_slideshow/penguin.png
• https://profdiazh.github.io/cs101/static_files/assignments/09_slideshow/puffer_fish.png
• https://profdiazh.github.io/cs101/static_files/assignments/09_slideshow/echidna.png

This video demonstrates the expected behavior.

Navigation:

• Use the left and right arrow keys to move to the previous and next image.
• The slideshow should loop back to the first image after the last and vice versa.
• Implement a feature that shows a summary screen with the total likes and dislikes for all images when we click the hamburger menu.

Like/Dislike Buttons:

• Each picture should have a “Like” and “Dislike” button for user interaction.
• Display the number of likes and dislikes for each image at the bottom of each screen.
• Functionality: Each button click should update the displayed count of likes or dislikes for the corresponding picture.

Use the following template code for the screens that contain pictures:

void setup() {
  size(500, 600);           
  background(255);          

}

void draw() {
  // like and dislike buttons
  fill(255);                
  rect(0, 500, 250, 50);    
  rect(250, 500, 250, 50);  
  fill(0);                  
  textSize(20);             
  text("like", 20, 530);    
  text("dislike", 420, 530);


  // area for counters
  fill(0);                  
  rect(0, 550, 500, 50);    
  fill(255);                
  textSize(20);             
  text("0", 20, 580);       
  text("0", 420, 580);   
  
  
  // Hamburger Menu
  fill(0); 
  rect(width - 40, 20, 30, 3); 
  rect(width - 40, 30, 30, 3); 
  rect(width - 40, 40, 30, 3);
}

Display Size:

Use a window size of 500 x 600 pixels for the slideshow.

Remember that we learned how to display images in Lecture Slides 21

Also, in Lecture Slides 26, we’ve learned how to use the up and down keyboard arrows. Use the same logic for the left and right arrows.

In Lecture Slides 27, we’ve learned how to navigate between screens.

In Lecture Slides 26, we’ve learned how to increment a counter.

Finally, in Lecture Slides 19 (slides 21 and 22), we’ve learned how to use if-statements to capture a button click.

Summary Screen:

• You should use the following template for the summary screen.
• The summary screen should appear when we click on the hamburger icon.
• The close button on the summary screen should close the summary and display the first image on the slide show.

void setup() {
  size(500, 600);
  background(255); 
}

void draw() {
  
  textSize(32);
  fill(0); 
  text("Summary", 200, 50); 

  textSize(18);
  text("Image", 50, 100);
  text("Likes", 220, 100);
  text("Dislikes", 350, 100);

  textSize(16);
  text("Cow", 50, 140);
  text("0", 220, 140);
  text("0", 350, 140);

  text("Frog", 50, 180);
  text("0", 220, 180);
  text("0", 350, 180);

  text("Penguin", 50, 220);
  text("0", 220, 220);
  text("0", 350, 220);

  text("Puffer Fish", 50, 260);
  text("0", 220, 260);
  text("0", 350, 260);

  text("Echidna", 50, 300);
  text("0", 220, 300);
  text("0", 350, 300);

  // Close Summary Button
  fill(0); 
  rect(175, 350, 150, 50); 
  fill(255); 
  textSize(20);
  text("Close Summary", 185, 380); 
  
}

Comments and Style

Name the file slideshow.pde.

Note: A portion of your score on this assignment will awarded based on your comments and style. Your programming should be well-formatted and easy for the graders to read and comprehend. You should follow the style guidelines we talked about in class and in previous assignments. (Please take a look at the lecture slides for reference.)

Development Strategy

Watch this video to learn how to start your program.

Grading Rubric

You must use the provided templates to receive a grade on the assignment

Disclosure: The images and decision tree for this assignment are property of grok academy