Online Speed Typing Master Create Grok 3 AI

by

आप लोगो के लिए एक ऐसा Speed Typing Master वाला Tool Create करेगे जिसे Elon Mask ने बनाया है। जिसका नाम Grok 3 जिसने Chatgpt, Deepseek r1 Ai को भी पीछे छोड दिया है। ये AI System पूरी तरह से Free है। Global Time Zone Converter

सबसे पहले अपने आप से पूछे कि आप किस तरह से Speed Typing Master की Website, App में क्या -2 होगा चाहिए। वो इस Code में Edit करके और भी कुछ और Add कर सकते हो। इसके लिए आप Grok 3 में इस कोड को Paste कर दे, जो मैने नीचे दिया। Check Play Online Typing Game

अगर मेरे जैसा बनाना चाहते हो, तो इस कोड को अपने Hosting में जाकर Public_html Folder में Paste कर दे। फाइल का नाम Index.html होना चाहिए।

Speed Typing  Game Tool Grok 3 Code AI

 

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Typing Master</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css” rel=”stylesheet”>
<style>
.game-container {
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
padding: 20px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.target-word {
font-size: 2.5rem;
letter-spacing: 3px;
font-weight: bold;
color: #2c3e50;
}
#inputField {
font-size: 1.5rem;
height: 60px;
text-align: center;
}
.stats-card {
background: #f8f9fa;
border-radius: 10px;
padding: 15px;
margin: 10px 0;
}
.progress {
height: 25px;
margin: 10px 0;
}
@media (max-width: 768px) {
.target-word {
font-size: 1.8rem;
}
#inputField {
font-size: 1.2rem;
}
}
</style>
</head>
<body class=”bg-light”>
<div class=”container py-5″>
<div class=”game-container”>
<h1 class=”text-center mb-4″>Typing Master</h1>

<!– Difficulty Selection –>
<div class=”row mb-4″>
<div class=”col-md-4 mb-3″>
<select class=”form-select” id=”difficulty”>
<option value=”easy”>Easy (2-3 letters)</option>
<option value=”medium”>Medium (3-4 letters)</option>
<option value=”hard”>Hard (5-6 letters)</option>
</select>
</div>
<div class=”col-md-4 mb-3″>
<select class=”form-select” id=”gameTime”>
<option value=”30″>30 Seconds</option>
<option value=”60″>60 Seconds</option>
<option value=”90″>90 Seconds</option>
</select>
</div>
<div class=”col-md-4″>
<button class=”btn btn-primary w-100″ id=”startBtn”>Start Game</button>
</div>
</div>

<!– Game Display –>
<div class=”text-center mb-4″>
<div class=”target-word bg-primary text-white p-3 rounded” id=”targetWord”></div>
</div>

<!– Input Field –>
<div class=”mb-4″>
<input type=”text” class=”form-control” id=”inputField” placeholder=”Type here…” disabled>
</div>

<!– Stats –>
<div class=”row text-center”>
<div class=”col-md-3 mb-3″>
<div class=”stats-card”>
<h5>TIME LEFT</h5>
<div id=”timer” class=”fs-3″>60</div>
</div>
</div>
<div class=”col-md-3 mb-3″>
<div class=”stats-card”>
<h5>SCORE</h5>
<div id=”score” class=”fs-3″>0</div>
</div>
</div>
<div class=”col-md-3 mb-3″>
<div class=”stats-card”>
<h5>ACCURACY</h5>
<div id=”accuracy” class=”fs-3″>100%</div>
</div>
</div>
<div class=”col-md-3 mb-3″>
<div class=”stats-card”>
<h5>ERRORS</h5>
<div id=”errors” class=”fs-3″>0</div>
</div>
</div>
</div>
</div>
</div>

<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js”></script>
<script>
const difficultySelect = document.getElementById(‘difficulty’);
const gameTimeSelect = document.getElementById(‘gameTime’);
const startBtn = document.getElementById(‘startBtn’);
const targetWord = document.getElementById(‘targetWord’);
const inputField = document.getElementById(‘inputField’);
const timerDisplay = document.getElementById(‘timer’);
const scoreDisplay = document.getElementById(‘score’);
const accuracyDisplay = document.getElementById(‘accuracy’);
const errorsDisplay = document.getElementById(‘errors’);

let currentWord = ”;
let timeLeft = 60;
let score = 0;
let errors = 0;
let totalTyped = 0;
let correctTyped = 0;
let gameInterval;
let timerInterval;

function generateWord() {
const difficulty = difficultySelect.value;
let length;

switch(difficulty) {
case ‘easy’:
length = Math.floor(Math.random() * 2) + 2; // 2-3
break;
case ‘medium’:
length = Math.floor(Math.random() * 2) + 3; // 3-4
break;
case ‘hard’:
length = Math.floor(Math.random() * 2) + 5; // 5-6
break;
}

const chars = ‘abcdefghijklmnopqrstuvwxyz’;
let word = ”;
for(let i = 0; i < length; i++) {
word += chars[Math.floor(Math.random() * chars.length)];
}
return word;
}

function updateDisplay() {
targetWord.textContent = currentWord;
inputField.value = ”;
}

function updateStats() {
const accuracy = totalTyped === 0 ? 100 : Math.round((correctTyped / totalTyped) * 100);
accuracyDisplay.textContent = `${accuracy}%`;
scoreDisplay.textContent = score;
errorsDisplay.textContent = errors;
}

function startGame() {
// Reset game state
clearInterval(gameInterval);
clearInterval(timerInterval);
timeLeft = parseInt(gameTimeSelect.value);
score = 0;
errors = 0;
totalTyped = 0;
correctTyped = 0;

// Enable input
inputField.disabled = false;
inputField.focus();

// Generate first word
currentWord = generateWord();
updateDisplay();

// Start timer
timerDisplay.textContent = timeLeft;
timerInterval = setInterval(() => {
timeLeft–;
timerDisplay.textContent = timeLeft;
if(timeLeft <= 0) endGame();
}, 1000);
}

function endGame() {
clearInterval(timerInterval);
inputField.disabled = true;
alert(`Game Over!\nScore: ${score}\nAccuracy: ${accuracyDisplay.textContent}`);
}

startBtn.addEventListener(‘click’, startGame);

inputField.addEventListener(‘input’, (e) => {
totalTyped++;

if(e.target.value === currentWord) {
correctTyped++;
score += currentWord.length * 10;
currentWord = generateWord();
updateDisplay();
} else if(!currentWord.startsWith(e.target.value)) {
errors++;
}

updateStats();
});

// Initialize
inputField.disabled = true;
</script>
</body>
</html>

 

#SpeedTypingMaster #TypingGame #TypingTest #FastTyping #TypingPractice #ImproveTyping #KeyboardSkills #OnlineTyping #TypingChallenge #TypeFast

Leave a Comment