Developing Course Practice Apps With Generative AI

Note: All links below will open in a separate tab or window.

I am still exploring in what areas I find value in the use of generative AI in my various roles as a faculty member. To date, one of the things I am finding valuable is the use of generative AI tools to develop resources that allow students to practice with computer science concepts and skills. Below I will describe and provide links to two practice applications that have been developed so far. Both were developed using ChatGPT. They are web applications, relying on HTML, CSS, and Javascript. When I develop a larger pool of these, I anticipate linking directly to them from the Teaching section of my website.

I think a key takeaway for me at this point is: I don’t have strong Javascript, CSS, or aesthetic skills. While I could (and should) learn those tools, the use of generative AI for the interface and backend programming has allowed me to focus on the educational goals of developing the practice applications.

At my institution, I commonly teach the undergraduate Programming Languages course, which includes, among other topics, coverage of finite state automata, regular expressions, push down automata, grammars, and related language concepts. I have also recently taught our undergraduate Data Structures and Algorithms course.

• For the Programming Languages course, I prompted the development of the following regular expression practice tool: Regular Expression Practice. It presents a regular expression and a set of words. It then prompts the user to indicate whether each word can be generated from the provided regular expression. Once the user has entered True or False, they can check their work. The tool allows the user to practice with multiple regular expressions.

• For the Data Structures And Algorithms course, I usually start with students thinking about the relationship between problem input size, computational complexity (number of fundamental operations needed as a formula based on problem input size), and actual time, with questions such as: If Student Susan is running an algorithm that requires \(n^{2}\) fundamental operations given \(n\) as an input size and running the algorithm with input of size \(100\) takes \(12\) hours, what size input can be used if no more than \(8\) hours are available? To provide opportunities for practice with this, I prompted the development of the Algorithm Runtime Explorer web application: Algorithm Runtime Explorer. The application allows algorithm complexity formulas and input size-to-time mappings to be entered first. A graph of input size against running time is generated, and then the user can explore other input size-to-time relationships.

To get each tool to where I wanted it required a series of prompts. After getting to the endpoint I was interested in on the regular expression practice tool, I asked ChatGPT to generate a singular prompt that would arrive at the same place. Below is that prompt. I have not tried the prompt myself to one-shot develop the app again, so your mileage may vary with its value, but it does aggregate what I initially prompted in a series.

---

Prompt:

Create a self-contained web application in a single HTML file, using HTML, CSS, and JavaScript, that can be opened directly in a standard web browser with no server or external libraries.

The app should be a regular expression practice quiz with these features:

• Show a regular expression on the left side of the page.
• Include about 10 different regular expressions.
• Let the user cycle through the regular expressions using left and right arrow buttons. Navigation should wrap around from the first expression to the last and vice versa.
• For each regular expression, show about 10 example strings on the right side of the page.
• Some strings should be generated by/match the regular expression, and some should not.
• For every string, provide True and False radio buttons so the user can indicate whether they think the string is generated by the regular expression.
• Include a “Show Answers” button.
• When “Show Answers” is clicked, display the actual True/False answer for every string.
• If the user’s selected answer is correct, highlight that row green.
• If the user’s selected answer is incorrect, highlight that row red.
• Show a score indicating how many answers were correct and how many were answered.
• Include a “Reset This Exercise” button that resets only the currently displayed regular-expression exercise.
• Preserve the user’s answers and whether answers have been revealed when they move between different regular expressions.
• Clearly display the empty string when it appears in an exercise.
• Optionally support the keyboard left and right arrow keys for navigating exercises.
• Use a clean, modern, responsive two-column layout that becomes a single column on smaller screens.
• Do not include any explanation or description of what each regular expression means underneath the regular expression. Only display the regular expression itself.

Use a mixture of regular expressions involving concatenation, alternation, Kleene star, plus, optional characters, character classes, repetitions, and binary strings. Keep all exercise data in a clearly editable JavaScript array so the regular expressions and example strings can easily be changed later.

Return the completed app as a downloadable .html file.