AI Isn't Here To Replace You... But To Place You Better
If you are a college student or have just graduated or are a few months or a few years into a job, this post is for you. If you are not getting a job and you hold AI responsible for it, this post is definitely for you.
Drop a ❤️ if this helps.
We have always been trained to think 'I can do it'. It kept us motivated and helped achieve a little something in life and we continued to believe so. Until.. someone got up and said, 'AI can do it better' and there was no one to object or retaliate.
I kept thinking about this incident and concluded that it is not about 'AI Can Do It Better' but about approaching solutions with a mindset how how something can be ‘Made Better with AI‘.
This decade should be about collaborating with AI and helping it improve your output. AI is a technology that should be accepted in our day-to-day work for problem-solving, no matter the task.
I am starting this platform to teach you from whatever I have learnt about using AI technology to its fullest potential and making it work for you rather than you working for AI. It can have its own mind, but humans should always be at the heart of AI.
Without getting into the details about me, I would like you to understand who I am through my ideologies. I have always been a firm believer in working on actions rather than theory, so we will be learning about using AI by implementing it in a fun, easy-to-grasp, and understandable project. We will not discuss fancy languages like ‘React’, ‘React Native‘, Java, C++, and so on. However, there are some skills required -
1. You should be able to tell AI in detail about what needs to be done
You should know very basic HTML, CSS, and JavaScript. If you don’t, do not worry, I’ll explain
In the course of our development, if you see errors in red, you should be able to tell AI that ‘There is an error in red on line x, please fix‘ and it should do the job for you.
Without delay, let us get started. And one more thing, I do not know how to blog or write gloriously, so do not expect it to be a colorful post. But you’ll be educated and enlightened,d feeling a little more confident about using AI with each article that you read..
What comes to mind when we think about AI? CHATGPT. AI is not just about using CHATGPT. But sure, it is a fun place to start, right? So let’s do it (Disclaimer: I have dedicated my life to development and know all the languages mentioned above, however, I never chose development as a field to grow in. But life takes its course. I have landed up in a position professionally where I am building projects worth tens of lakhs using AI, so we will get there together as well, but eventually. Think about it like building a physique. I want you to be able to compete with the big guys, however, we start with a warmup exercise today.
This is a free game that we are going to build, aimed at helping you be more confident about AI. Let us start by going to our ChatGPT account.
It should look like the above screenshot.
You can not copy paste the steps mentioned below in bold and paste them one under the another to get the HTML for the game however, I would like you to read through and learn the idea that goes behind building something good.. and eventually get to building something great.. (Disclaimer: I was originally a Biotechnology and Commerce student. Today I believe there is there is nothing that cannot be developed)
Now type where it says ‘Ask anything’..
STEP 1: Help me create HTML for a cool Maths game where…
What this tells GPT is that it is required to create a game where one can play MATHS. Simple Right?
Now, imagine a simple Maths game that comes to your mind. (Disclaimer: I have the habit of binge-watching Netflix. There is a Korean TV series, “The Devil’s Plan,” which is at the heart of this concept. Do watch if you haven’t yet.
Maths is all about numbers, so sure, we start by telling GPT that there are 10 digits.
STEP 2: There are 10 digits (ex, 6,7,8,9)
AI is still evolving, so you need to tell it a few obvious things. Also, try not to be disrespectful or cheeky while prompting (prompting is telling AI what to do). Whenever I lose my cool with AI, I give myself time to cool down and get back to building again.. You cannot expect AI to act like a human, yet
Maths is also about symbols, which help form equations.
STEP 3: There are 5 symbols (multiplication, minus, plus, equals, division)
A timer can help bring forth the challenger in some individuals and it also has the nostalgia factor to it and reminds us of those exams we used to give during school days.
STEP 4: There is a timer of 30 seconds to answer each equation
Again, something obvious, but something that needs to be told. AI seems to be foolish, right? Wait till you see the results.
STEP 5: Ensure that the BODMAS rules are followed
Now, imagine that you are someone who is playing the game right. If someone gives you one question or 3 questions to answer, that too Maths, one right answer or 3 wrong answers are too skewed to judge your caliber. By that logic, we will give our users 10 equations to answer. For our professionals (it is about RO,I so greater engaging equations mean better user retention)
STEP 6: Create 10 equations. Which means that there are 10 questions to be answered
AI tools are extremely creative, so sometimes (more than often, I would say) it becomes necessary to control the response. We will help AI know what the equations should look like
STEP 7: The equations are to be structured like Digit (Symbol) Digit (Symbol) Digit Equals Answer
As AI is generating these equations, let it also create the answer for these and when someone who plays the game answers, they get a point.
STEP 8: Have the answer predefined for these equations that you create, and reward the user with a point when they answer
Like any good exam does, our game will also judge you by the tool marks you get
STEP 9: Add a final score at the end on the basis of what users answer
How do we design the game? We don’t. AI has enough knowledge of UI, and we let it decide what the user interface should be.
STEP 10: Provide it a beautiful UI layout and structure this as a cool game.
And you’re done.
After pasting this prompt, it should look like
After pressing enter, it should generate something like the below screenshot
I will paste what I got as a file at the end of this post too. You can copy this response and open the following URL to test the game.
URL - https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
The game should look like this
TRY PLAYING IT.
You can paste this game into an .html file in your system and name it as game.html
When you double click it, it opens in your browser, and it can be played as a game. This game can also be hosted on a website, and different levels can be added to play this game.
Additional thoughts -
If this game looks too easy, remember that with AI sky is the limit. Here is what I would do to make it a cutting-edge game
Calculate the remaining time from each question and rank players based on that
Add brackets and double-digit numbers to make the game complex
Try building a similar game using the alphabet where users can create words with a combination of letters.
Add equations with digits on both sides of the equal sign and solve it for x
Code for the game (Save it as game.html on your system in a text file and run on the browser to play)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cool Maths Game</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(to right, #83a4d4, #b6fbff);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.game-container {
background: #ffffff;
border-radius: 16px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
width: 90%;
max-width: 500px;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 10px;
}
.equation {
font-size: 28px;
margin: 20px 0;
}
input[type="number"] {
padding: 10px;
font-size: 18px;
width: 100px;
text-align: center;
}
.timer {
font-size: 20px;
margin-top: 10px;
color: #ff4d4d;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
}
.btn:hover {
background-color: #45a049;
}
.score-display {
font-size: 24px;
margin-top: 20px;
color: #333;
}
</style>
</head>
<body>
<div class="game-container">
<h1>Cool Maths Game</h1>
<div id="questionBox">
<div class="equation" id="equation">Equation</div>
<input type="number" id="userAnswer" />
<div class="timer" id="timer">30</div>
<button class="btn" onclick="submitAnswer()">Submit</button>
</div>
<div id="scoreSection" class="score-display" style="display:none;"></div>
</div>
<script>
const questions = [
{ equation: "6 + 2 * 3 =", answer: 12 },
{ equation: "9 - 3 + 2 =", answer: 8 },
{ equation: "7 * 2 - 4 =", answer: 10 },
{ equation: "8 / 2 + 6 =", answer: 10 },
{ equation: "3 + 4 * 2 =", answer: 11 },
{ equation: "9 - 2 * 3 =", answer: 3 },
{ equation: "6 / 2 + 5 =", answer: 8 },
{ equation: "5 + 3 * 2 =", answer: 11 },
{ equation: "7 + 6 / 3 =", answer: 9 },
{ equation: "8 - 2 + 4 =", answer: 10 }
];
let current = 0;
let score = 0;
let timeLeft = 30;
let timer;
function showQuestion() {
document.getElementById("equation").textContent = questions[current].equation;
document.getElementById("userAnswer").value = "";
document.getElementById("timer").textContent = 30;
timeLeft = 30;
timer = setInterval(() => {
timeLeft--;
document.getElementById("timer").textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(timer);
submitAnswer();
}
}, 1000);
}
function submitAnswer() {
clearInterval(timer);
const userVal = parseFloat(document.getElementById("userAnswer").value);
if (userVal === questions[current].answer) {
score++;
}
current++;
if (current < questions.length) {
showQuestion();
} else {
document.getElementById("questionBox").style.display = "none";
document.getElementById("scoreSection").style.display = "block";
document.getElementById("scoreSection").textContent = `Game Over! Your Score: ${score}/10`;
}
}
window.onload = showQuestion;
</script>
</body>
</html>CSS - It is the part of the code that controls the styling of how an HTML document will be showcased. (To remember: Anything that you put in <style> tags is represents your CSS, which represents how the HTML will look when rendered (loaded on screen))
JavaScript - JavaScript is used to add dynamic interactivity to web pages. (To remember: Anything that you put between script tags will be a part of the JavaScript)
Prompt - Is it what you feed to AI to generate a response? The quality of the prompt is equal to the quality of the response generated.
Drop a ❤️ if this post helped you.