ChatGPT'ye karşı bir hayranlığım oldu açıkçası.
Soru sorma kabiliyetinize göre bir çok işi yaptırmak mümkün.
Belki hatırlayanlarınız vardır yıllar öne mIRC kanallarında Soru Cevap botları vardı şu şekilde;
Çalışan halini test edebilirsiniz
ChatGPT'ye sorum şu şekildeydi;
Ona sorduğum bazı düzeltmeler;
Bana sunduğu kodlar;
index.html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Soru Cevap Botu</title>
<!-- CSS dosyamız -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Sohbet ekranı -->
<div id="chat">
<div id="messages"></div>
<form id="chat-form">
<input type="text" id="message-input" autocomplete="off" placeholder="Cevabınızı yazın ve Enter tuşuna basın...">
<button id="send-button">Gönder</button>
</form>
</div>
<!-- JavaScript dosyamız -->
<script src="script.js"></script>
</body>
</html>script.js
// Sohbet sınıfı
class Chat {
// Constructor
constructor() {
// Soru ve Cevaplar
this.questions = [
{
question: "Türkiye'nin başkenti neresidir?",
answer: "Ankara"
},
{
question: "Arpanın en az üretildiği bölgemiz hangisidir?",
answer: "Karadeniz"
}
];
this.askQuestions = this.questions;
this.startTime = 0;
this.finishMessage = null;
// İpucu ayarları
this.revealedLetters = [];
this.hintCount = 3;
this.hintInterval = 3000; // 3 saniye
this.hintIntervalTimer = null;
this.nextQuestionTimer = null;
// Öğrenci ismi
this.studentName = "";
// Mesajları tutan dizi
this.messages = [];
// HTML elementlerini al
this.chat = document.getElementById("chat");
this.messagesDiv = document.getElementById("messages");
this.form = document.getElementById("chat-form");
this.input = document.getElementById("message-input");
this.sendButton = document.getElementById("send-button");
this.displayMessage("SoruCevapBotu", "Lütfen adınızı yazın...");
this.input.placeholder = "Adınız";
this.input.addEventListener("keydown", e => {
// Enter tuşuna basıldı
if (e.keyCode === 13) {
if ( ! this.studentName) {
this.studentName = e.target.value;
this.displayMessage("SoruCevapBotu", `Merhaba ${this.studentName}, soruları cevaplamaya başlayabiliriz.`);
this.input.placeholder = "Cevabınızı yazın ve Enter tuşuna basın...";
this.askQuestion();
} else {
// İçerik kontrolü
if (this.input.value.trim() === "") {
return;
}
this.displayMessage(this.studentName, e.target.value);
// Cevabı kontrol et
if (e.target.value.toLowerCase() === this.currentQuestion.answer.toLowerCase()) {
clearTimeout(this.hintIntervalTimer);
// Cevaplandığı süreyi hesapla
var elapsedTime = (Date.now() - this.startTime) / 1000;
// Doğru cevap, tebrik et
this.displayMessage("SoruCevapBotu", `Bravo ${this.studentName}! Doğru cevap "${this.currentQuestion.answer}". Soruyu ${elapsedTime} saniyede bildiniz.`);
clearTimeout(this.hintIntervalTimer);
this.input.value = "";
if (this.nextQuestionTimer) clearTimeout(this.nextQuestionTimer);
this.nextQuestionTimer = setTimeout(() => {
this.askQuestion();
}, 3000);
}
}
this.input.value = "";
}
});
// Form gönderme event'ini ekle
this.form.addEventListener("submit", e => {
e.preventDefault();
});
}
// Bir soru sor
askQuestion() {
if ( ! this.askQuestions.length) {
if ( ! this.finishMessage) {
// Sorular bitti, oyunu bitir
this.finishMessage = "Tüm soruları cevapladınız. Tebrikler!";
this.displayMessage("SoruCevapBotu", this.finishMessage);
}
return;
}
// Rastgele bir soru seç
const index = Math.floor(Math.random() * this.askQuestions.length);
this.currentQuestion = this.askQuestions.splice(index, 1)[0];
// Soruyu ekrana yazdır
this.displayMessage("SoruCevapBotu", this.currentQuestion.question);
// İpucu harflerini sıfırla
this.revealedLetters = [];
// Soruyu sormanın zamanını kaydet
this.startTime = Date.now();
// İpucuları göster
this.displayHint();
}
displayHint() {
this.hintIntervalTimer = setTimeout(() => {
let hint = this.getHint();
this.displayMessage("SoruCevapBotu", `İpucu: ${hint}`);
if (this.revealedLetters.length >= this.hintCount) {
this.nextQuestionTimer = setTimeout(() => {
this.displayMessage("SoruCevapBotu", `Cevap yok! Cevap "${this.currentQuestion.answer}". Bakalım sonrakini bilecek misiniz..`);
this.askQuestion();
}, 5000);
} else {
this.displayHint();
}
}, this.hintInterval);
}
// İpucuları göster
getHint() {
let hint = "";
let answer = this.currentQuestion.answer;
for (let i = 0; i < answer.length; i++) {
if (this.revealedLetters.includes(i)) {
hint += answer[i];
} else if (/[^a-zA-Z0-9]/.test(answer[i])) {
// cevap içinde özel karakterler varsa, açılır
hint += answer[i];
} else {
hint += "*";
}
}
let index;
if (this.revealedLetters.length === 0) {
// ilk ipucu, ilk veya son harf açılır
index = Math.random() < 0.5 ? 0 : answer.length - 1;
} else {
// diğer ipuçlarında rastgele bir harf açılır
do {
index = Math.floor(Math.random() * answer.length);
} while (this.revealedLetters.includes(index) || /[^a-zA-Z0-9]/.test(answer[index]));
}
this.revealedLetters.push(index);
return hint.substring(0, index) + answer[index] + hint.substring(index + 1);
}
// Mesajı sohbet ekranına ekle
displayMessage(sender, message) {
// Mesaj objesi oluştur
const messageObject = {
sender: sender,
message: message,
date: new Date()
};
// Mesajı diziye ekle
this.messages.push(messageObject);
// Mesajı ekrana yazdır
const messageElement = document.createElement("div");
messageElement.classList.add("message");
if (sender === "Oyuncu") {
messageElement.classList.add("right");
}
messageElement.innerHTML = `
<div class="text">
<div class="sender">${sender}:</div>
${message}
</div>
`;
this.messagesDiv.appendChild(messageElement);
// Ekranı en aşağıya scrolle
this.messagesDiv.scrollTop = this.messagesDiv.scrollHeight;
}
}
// Sınıfı kullan
const chat = new Chat();style.css
/* Genel stiller */
body {
font-family: sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
/* Sohbet ekranı */
#chat {
width: 500px;
margin: 0 auto;
margin-top: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
/* Mesajlar */
#messages {
overflow-y: scroll;
height: 300px;
padding: 10px;
}
#messages .message {
margin-bottom: 10px;
display: flex;
}
#messages .message.left {
justify-content: flex-start;
}
#messages .message.right {
justify-content: flex-end;
}
#messages .message .text {
background-color: #ddd;
color: #666;
padding: 10px;
border-radius: 5px;
font-size: 0.9em;
}
#messages .message.right .text {
background-color: #007bff;
color: #fff;
}
/* Form */
#chat-form {
display: flex;
padding: 10px;
}
#chat-form input {
flex-grow: 1;
height: 40px;
border: none;
padding: 0 10px;
font-size: 0.9em;
}
#chat-form button {
height: 40px;
border: none;
background-color: #007bff;
color: #fff;
font-size: 0.9em;
cursor: pointer;
}