Statistics. For many students, it may conjure images of complex formulas, abstract concepts, and daunting tables (depending, I suppose, on how old your professor is). Mastering statistics often comes with significant hurdles. Students frequently grapple with visualizing how probability density functions (PDFs) morph as their parameters change. The task of calculating critical values often involves cumbersome calculators or flipping through dense textbook appendices and can feel like a chore. Perhaps most crucially, translating these values into a clear understanding of rejection regions for hypothesis testing remains a persistent challenge.
What if there was a more intuitive way to engage with these concepts? What if creating interactive learning tools wasn't solely the domain of seasoned software developers? This is where the exciting potential of generative artificial intelligence (AI), and a new approach I call vibe coding, comes into play. In this post, I'll share how I used Google Gemini to effortlessly create a web application designed to help students visualize these very statistical challenges, all through the power of a detailed, natural language prompt.
For decades, instructing computers has meant learning their language. These languages include C++, Python, JavaScript, and a myriad of others. Mastering these languages presents a steep learning curve. Some might even argue that the inherent difficulty of learning to code signifies a fundamental limitation in how we've traditionally interacted with machines. Most students are on a path to become domain experts in their chosen fields, not necessarily computer scientists. So, how can they leverage the power of computation without diverting years to mastering complex syntax? Do you really want to learn .controls { background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }?
Enter vibe coding, a term aptly coined by Andrej Karpathy. This isn't about learning a new programming language. Instead, it's about leveraging our language to instruct sophisticated AI models like Google Gemini. Google regularly updates its models, which consistently appear at the top of AI leaderboards, and one of their most impressive capabilities is code generation. With vibe coding, you describe the functionality, the appearance, and the behavior of what you want to create, and the AI translates that into functional code. This approach democratizes our ability to instruct computers, empowering anyone to build useful tools, like the statistics web app we're about to explore. It shifts the focus from how to code to what to create.
So, what did this vibe coding approach with Google Gemini actually produce? The result is a simple interactive web application designed to bring statistical distributions to life. The primary goal wasn't just to build an app, but to showcase how a complex, multi-faceted tool could be generated from a single, detailed natural language prompt.
The application consists of a central index.html page providing instructions and links to five distinct visualization pages. Each of these pages focuses on a specific probability distribution crucial for introductory statistics:
- The t-distribution (with variations for two-tailed, one-tailed lower, and one-tailed upper hypothesis tests)
- The chi-squared distribution
- The F-ratio distribution
On each distribution page, students can use intuitive sliders to adjust the parameters of the distribution (like degrees of freedom). A dropdown menu allows them to select the level of significance (alpha). Instantly, the curve of the probability density function updates, critical values are calculated and displayed, and, most importantly, the corresponding region(s) of rejection are visually highlighted on the plot. Each page also includes a simple link to return to the main index.
While the app itself is a valuable learning aid, its true significance in the context of this blog post is how it came to be as a direct output of instructing Google Gemini. It serves as a tangible testament to the capabilities of modern generative AI in translating detailed human intent into working software.
The magic of vibe coding lies in the quality and detail of the prompt you provide to the AI. For this statistics web app, I didn't write a single line of HTML, CSS, or JavaScript myself. Instead, I crafted one comprehensive prompt for Google Gemini. This wasn't a vague request. It was a detailed blueprint outlining the entire application. A copy of the prompt is printed at the end of this post.
By providing this level of structured detail, I was essentially having a conversation with Gemini, clearly articulating the vibe and precise requirements of the final application.
So, what happened after feeding this meticulously crafted prompt to Google Gemini? The outcome was, in my opinion, great. In a single generation pass, Gemini delivered all six HTML files as requested. There was no iterative back-and-forth, no debugging cryptic error messages, no wrestling with partial outputs. The code was, for all intents and purposes, faultless right out of the gate.

Even more impressively, Gemini made intelligent choices for the underlying technologies. It opted to use Plotly.js for rendering the interactive charts and jStat for the necessary statistical calculations (like probability density functions and inverse distribution functions to find critical values). These are robust, industry-standard libraries, and Gemini integrated them seamlessly to meet the prompt's requirements. Full disclosure. I use Plotly in Python all the time, but have never used the javascript version, and I have never used jStat.
The sliders for degrees of freedom and other parameters worked perfectly. The dropdowns for significance levels functioned as specified. The plots dynamically updated, the critical values were accurately calculated and displayed, and the rejection regions were correctly shaded. The web app performed exactly as intended by the prompt.

Seeing a complex set of instructions, spanning multiple interconnected files and involving sophisticated visual and mathematical logic, translated so perfectly into a functional application was a genuine wow moment. It underscored the immense potential of generative AI to act as a highly capable development partner.
This experience wasn't just about getting code. It was about witnessing an AI understand and execute a detailed vision, saving countless hours of traditional development, coding, and debugging. It points towards a significant shift in how we can create and interact with digital tools, especially in education.
Subject matter experts, like statistics instructors, can now envision and bring to life custom learning tools without needing extensive programming knowledge or relying on stretched developer resources. Even students with a clear idea for a helpful utility could potentially prototype it.
Imagine needing a slight variation of a tool, or a new visualization for a different concept. With vibe coding, generating or modifying such tools can be orders of magnitude faster than traditional development cycles. An idea can go from concept to functional prototype in remarkably short order.
For me, this opens the door to highly personalized learning experiences. Tools can be quickly tailored to specific curriculum needs, individual student challenges, or unique datasets, making learning more relevant and effective.
So, I encourage you to explore this yourself. If you have an idea for a tool, a visualization, or an application, try vibe coding it with a generative AI like Google Gemini. You might be surprised at what you can create. This isn't just about finding new ways to make games or simple scripts. It's about fundamentally changing how we interact with technology and empowering a new wave of creators and innovators across all fields.
The full prompt
Create the following six standalone webpages. 1. `index.html` 2. `tTwoTailed.html` 3. `tOneTailedLower.html` 4. `tOneTailedUpper.html` 5. `chiSquared.html` 6. `FRatio.html` Use the following instructions for each page. `index.html` should be have a white background. Add the title "VISUALIZING DISTRIBUTIONS" in black bold text in the right upper corner. Add a box below this with a blue-grey background. Add the subtitle "PDF Curve. Critical Value. Region of Rejection" in bold white text at the top left of the box. Add the text "Instructions" in bold white text below the subtitle in the box. Add the text "To view a distribution with it critical value(s) and region(s) of rejection, choose from the links below. Each link opens a webpage that shows a curve of the appropriate probability density function. Drag the required sliders to set the value of the parameter(s). Choose from 0.01, 0.05, and 0.1 to set the level of significance" below this in the box. Add an orange box at the left bottom of the larger blue-grey box. Fill it with bold white text that reads "Choose Below". Add the following links below the blue-grey box and link to the appropriate pages. 1. t distribution with a two-tailed alternative hypothesis 2. t distribution with a one-tailed alternative hypothesis (lower tail) 3. t distribution with a one-tailed alternative hypothesis (upper tail) 4. chi-squared distribution 5. F-ratio distribution `tTwoTailed.html` page is a white webpage. Add the title "t distribution". Add the subtitle "Two-tailed alternative hypothesis". Add a slider with the title "Degrees of Freedom". Set the minimum to 10 and the maximum to 100 in steps of 1. Add a drop-down box below the slider with the title "Level of Significance". Make the choices 0.01, 0.05, and 0.1. Let 0.05 be the default. Draw the curve of the probability density function below this. Keep the horizontal axis limits from -5 to 5 and the vertical axis limits from 0 to 0.45 constant at all times. Add small orange markers on the horizontal axis at the two values for the critical values calculated from the degrees of freedom and level of significance. Fill the area under the curve from -5 to the lower-tail critical value and from the upper-tail critical value to +5. Add a textbox below the curve with the title "Lower-Tail Critical Value:" and show the lower-tail critical value to three decimal places. Below this add a textbox with the title "Upper-Tail Critical Value:" and show the upper-tail critical value. Update the curve, the markers, the filled areas, and the critical values dynamically based on the values of the degrees of freedom slider and the choice of level of significance. Add a link back to `index.html` below with the title "...back to the home page". `tOneTailedLower.html` page is a white webpage. Add the title "t distribution". Add the subtitle "One-tailed alternative hypothesis (lower)". Add a slider with the title "Degrees of Freedom". Set the minimum to 10 and the maximum to 100 in steps of 1. Add a drop-down box below the slider with the title "Level of Significance". Make the choices 0.01, 0.05, and 0.1. Let 0.05 be the default. Draw the curve of the probability density function below this. Keep the horizontal axis limits from -5 to 5 and the vertical axis limits from 0 to 0.45 constant at all times. Add a small orange marker on the horizontal axis at the value for the critical values calculated from the degrees of freedom and level of significance. Fill the area under the curve from -5 to the lower-tail critical value. Add a textbox below the curve with the title "Lower-Tail Critical Value:" and show the lower-tail critical value to three decimal places. Update the curve, the marker, the filled area, and the critical value dynamically based on the values of the degrees of freedom slider and the choice of level of significance. Add a link back to `index.html` below with the title "...back to the home page". `tOneTailedUpper.html` page is a white webpage. Add the title "t distribution". Add the subtitle "One-tailed alternative hypothesis (upper)". Add a slider with the title "Degrees of Freedom". Set the minimum to 10 and the maximum to 100 in steps of 1. Add a drop-down box below the slider with the title "Level of Significance". Make the choices 0.01, 0.05, and 0.1. Let 0.05 be the default. Draw the curve of the probability density function below this. Keep the horizontal axis limits from -5 to 5 and the vertical axis limits from 0 to 0.45 constant at all times. Add a small orange marker on the horizontal axis at the value for the critical value calculated from the degrees of freedom and level of significance. Fill the area under the curve from the upper-tail critical value to +5. Add a textbox below the curve with the title "Upper-Tail Critical Value:" and show the upper-tail critical value to three decimal places. Update the curve, the marker, the filled area, and the critical value dynamically based on the values of the degrees of freedom slider and the choice of level of significance. Add a link back to `index.html` below with the title "...back to the home page". `chiSquared.html` page is a white webpage. Add the title "chi-squared distribution". Add a slider with the title "Degrees of Freedom". Set the minimum to 1 and the maximum to 8 in steps of 1. Add a drop-down box below the slider with the title "Level of Significance". Make the choices 0.01, 0.05, and 0.1. Let 0.05 be the default. Draw the curve of the probability density function below this. Keep the horizontal axis limits from 0 to 20 and the vertical axis limits from 0 to 0.35 constant at all times. Add a small orange marker on the horizontal axis at the value for the critical value calculated from the degrees of freedom and level of significance. Fill the area under the curve from the critical value to 20. Add a textbox below the curve with the title "Critical Value:" and show the critical value to three decimal places. Update the curve, the marker, the filled area, and the critical value dynamically based on the values of the degrees of freedom slider and the choice of level of significance. Add a link back to `index.html` below with the title "...back to the home page". `FRatio.html` page is a white webpage. Add the title "F-ratio distribution". Add a slider with the title "Numerator Degrees of Freedom". Set the minimum to 1 and the maximum to 5 in steps of 1. Below this add a slider with the title "Denominator Degrees of Freedom". Set the minimum to 15 and the maximum to 148, in steps of 1. Add a drop-down box below the slider with the title "Level of Significance". Make the choices 0.01, 0.05, and 0.1. Let 0.05 be the default. Draw the curve of the probability density function below this. Keep the horizontal axis limits from 0 to 10 and the vertical axis limits from 0 to 0.8 constant at all times. Add a small orange marker on the horizontal axis at the value for the critical value calculated from the degrees of freedom and level of significance. Fill the area under the curve from the critical value to 10. Add a textbox below the curve with the title "Critical Value:" and show the critical value to three decimal places. Update the curve, the marker, the filled area, and the critical value dynamically based on the values of the degrees of freedom slider and the choice of level of significance. Add a link back to `index.html` below with the title "...back to the home page".









