CCIT4020 – Introduction to Computer Programming

AI Taster project [Total marks: 50]

CCIT4020 – Introduction to Computer Programming [Fall 2024]

Learning Objectives

1. Gain knowledge of Tkinter widget creation and positioning.

2. Learn to write prompts for AI tools and identify proper solutions to meet requirements.

3. Practice UI design and logic implementation with the Python language.

Intended Learning Outcomes

1. Students should be able to write basic controls, such as labels, buttons, and entry boxes, and position them properly in a window.

2. Students should gain knowledge of prompt engineering and identify proper answers to their questions.

3. Students should be able to solve real-time problems by programming in Python with the assistance of AI tools.

Project Structure

A. Self-learning by watching videos. Submit the feedback form after watching these provided videos.

B. Self-learning on Python UI related modules [20 marks]

To complete this section, you need to write prompts on generative AI tools, identify proper answers, fill in the form in AI-Prompts.docx and submit it to SOUL.

C. Project implementation [30 marks]

Read the project description and complete coding in specified files.

Project Description

This project is designed to train students to gain programming knowledge through self-learning with generative AI tools, such as Copilot, HKUSPACE Chat, etc.

The Python modules used in this project are limited to Tkinter (Tkinter is the standard GUI library for Python), Pillow, ImageTk, Image, and random. All the other modules cannot be used in this project.

This project will explore Graphical User Interface (GUI) programming and will consist of two parts.

Part 1 [15 marks] Get a task based on a student’s name and ID.

In this part, you need to design a user interface that contains labels, input boxes, and buttons. When a student inputs the Student Name and Student ID into the corresponding input box, and clicks the “Get Task” button, the task will be displayed after the “Your Task:” label. Press the “Exit Program” button to end this program.

The task will be determined by the following logic:

· Assign task A to students with even-numbered student IDs. The task string displayed after “Your Task:” label is:

"To complete task A: Display an image by selection."

· Assign task B to students with odd-numbered student IDs. The task string displayed after “Your Task:” label is:

"To complete task B: Display all images then shuffle them."

Design and implement part 1 following the specifications below and save the source code in the AI_Proj_Task.py file.

1. Create various widgets, such as labels, buttons, OptionMenu widgets, and Entry boxes. You shall seek help from HKU SPACE Chat or other generative AI tools to find out how to create them and position them in the window. Use the form in AI-Prompts.docx to complete your self-learning.

2. The control details:

· The initial status before entering the student’s name and student ID

o Replace “John Doe” with your name and replace the sample student ID 20242020 with your Student ID.

o Note that the entry box after “Your Task:” is in disabled status initially.

· Output task when student ID is an even number

After the student’s name and student ID are entered, press the “Get Task” button. The output is as below if the student ID is an even number.

· Output task when student ID is an odd number

After the student's name and student ID are entered, press the “Get Task” button. The output is as below when the student ID is an odd number.

Part 2 [15 marks]

Part 2 should be implemented based on the task you received in Part 1. Pay attention carefully to your own task.

1. Task A: Display an image by selection

Four images are provided for this task. You need to create a user interface containing an “Exit Program” button, a drop-down menu and an image label. The names of the four images should be listed in a drop-down menu, and the corresponding image should be displayed when its name is selected. This program will end when you click the “Exit Program” button.

Design and implement this task and save the source code in AI_Proj_Selection.py file.

The control details are provided for task A:

· Initial status of Task A.

Replace “John Doe” with your name and replace the sample student ID “20242020” with your Student ID.

l Options in the OptionMenu.

l Image display after selecting an image in the OptionMenu.

2. Task B: Display all four images in a window then shuffle them

Four images are provided for this task. You need to display those images in a window containing 4 labels, an “Exit Program” button, and a “Shuffle” button. Shuffle all images by pressing the “Shuffle” button. Clicking the “Exit Program” button should close the window and end the program immediately.

Design and implement this task and save it in the AI_Proj_Shuffle.py file.

The control details of Task B:

Replace “Amy Doe” with your name and replace the sample student ID “20242021” with your Student ID in the title.

Images will be randomly displayed on each image label after pressing the “Shuffle” button.

The window will be closed, and the program ends after clicking the “Exit Program” button.

Project Implementation logic

1. The implementation logic of Part 1:

· Import modules from the proper package or packages

· Create a window by calling Tk(), which should work as the parent of all other controls.

· Set the title and size ("500x200") of this window.

· Create labels and position them using the grid system.

· Create entry boxes and position them using the grid system.

· Create buttons and position them using the grid system.

· Apply events on both buttons individually by giving a value to the "command"

attribute.

· Write a function to implement the rule for assigning a proper task to each student based on the student ID.

Hint: Do not use hard-coded student IDs. Instead, retrieve the student ID entered in the student ID entry box.

2. The implementation logic of Task A:

· Import modules from proper packages

· Create a window, set a size ("600x600"), and customize the title

· Create an “Exit Program” button and pack it into this window created above.

· Create an OptionMenu, set images and other attributes, and pack it into the window created above.

· Create an image label then pack it into the window created above.

· Write a function to get the selection, create a photo in Tkimage format, and configure it to the image label.

· Set the command attribute of the OptionMenu to be the function name to trigger the image display.

3. The implementation logic of Task B:

· Import modules from proper packages

· Create a window, set a size("600x600"), and customize the title

· Create an “Exit Program” button, a “Shuffle” button, and position them into this window by using the grid system.

· Create 4 image labels and position them into the window with the grid system.

· Display 4 images initially.

· Write a function to display the updated images after they shuffle.

· Call this function by setting the function name to be the value of the “command” attribute of the “Shuffle” button.

Project Submission

For the student with an even number of student ID, you must submit the below files on SOUL:

· AI_Proj_Task.py

· AI_Proj_Selection.py

· AI-Prompts.docx (You should save and convert this one to be .pdf after you fill in answers. Then submit it to SOUL)

For the student with an odd number of student ID, you must submit the below files on SOUL:

· AI_Proj_Task.py

· AI_Proj_Shuffle.py

· AI-Prompts.docx (You should save and convert this one to be .pdf after you fill in answers. Then submit it to SOUL)

·