uji
Monday, January 19, 2026
Add Comment
Guru Indonesia Berkah
Buat prompt AI untuk Mengajar Pendidikan Agama Islam
Tips Penggunaan
- ���� Isi semua field untuk mendapatkan prompt yang lebih spesifik dan terstruktur
- • Gunakan topik spesifik untuk detail materi yang lebih mendalam
- • Salin prompt dan gunakan di ChatGPT, Claude, Gemini, atau AI lainnya
- • Sesuaikan hasil dengan kebutuhan dan konteks pembelajaran Anda
Guru Indonesia Berkah
Buat prompt AI untuk Mengajar Pendidikan Agama Islam
Tips Penggunaan
- ���� Isi semua field untuk mendapatkan prompt yang lebih spesifik dan terstruktur
- • Gunakan topik spesifik untuk detail materi yang lebih mendalam
- • Salin prompt dan gunakan di ChatGPT, Claude, Gemini, atau AI lainnya
- • Sesuaikan hasil dengan kebutuhan dan konteks pembelajaran Anda
Guru Indonesia Berkah
Buat prompt AI untuk Mengajar Pendidikan Agama Islam
Tips Penggunaan
- ���� Isi semua field untuk mendapatkan prompt yang lebih spesifik dan terstruktur
- • Gunakan topik spesifik untuk detail materi yang lebih mendalam
- • Salin prompt dan gunakan di ChatGPT, Claude, Gemini, atau AI lainnya
- • Sesuaikan hasil dengan kebutuhan dan konteks pembelajaran Anda
Mohon isi minimal: Jenjang Pendidikan, Materi PAI, dan Jenis Bahan Ajar
`;
}
function displayPrompt(prompt) {
const outputArea = document.getElementById('outputArea');
const promptOutput = document.getElementById('promptOutput');
outputArea.classList.remove('hidden');
outputArea.classList.add('animate-fade-in');
promptOutput.textContent = prompt;
outputArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
function copyToClipboard() {
const promptOutput = document.getElementById('promptOutput');
const copyToast = document.getElementById('copyToast');
const copyBtn = document.getElementById('copyBtn');
const copyBtnText = document.getElementById('copyBtnText');
const textToCopy = promptOutput.textContent;
if (!textToCopy || textToCopy.trim() === '') {
return;
}
// Disable button during copy
copyBtn.disabled = true;
copyBtnText.textContent = 'Menyalin...';
// Create a temporary textarea element
const textarea = document.createElement('textarea');
textarea.value = textToCopy;
textarea.style.position = 'fixed';
textarea.style.opacity = '0';
document.body.appendChild(textarea);
try {
textarea.select();
textarea.setSelectionRange(0, 99999);
const successful = document.execCommand('copy');
if (successful) {
// Show success state
copyBtnText.textContent = '✓ Tersalin!';
// Show toast
copyToast.classList.remove('translate-y-20', 'opacity-0');
copyToast.classList.add('translate-y-0', 'opacity-100');
// Hide toast
setTimeout(() => {
copyToast.classList.add('translate-y-20', 'opacity-0');
copyToast.classList.remove('translate-y-0', 'opacity-100');
}, 2000);
} else {
copyBtnText.textContent = 'Gagal Salin';
}
} catch (err) {
copyBtnText.textContent = 'Gagal Salin';
}
document.body.removeChild(textarea);
// Reset button after delay
setTimeout(() => {
copyBtnText.textContent = 'Salin Prompt';
copyBtn.disabled = false;
}, 1500);
}
function resetForm() {
// Reset all select elements
document.getElementById('jenjang').value = '';
document.getElementById('kelas').value = '';
document.getElementById('materi').value = '';
document.getElementById('jenis').value = '';
document.getElementById('pendekatan').value = '';
document.getElementById('durasi').value = '';
// Reset text input
document.getElementById('topik').value = '';
document.getElementById('materiLainnya').value = '';
// Hide custom materi input
document.getElementById('materiLainnya').classList.add('hidden');
// Hide output area
const outputArea = document.getElementById('outputArea');
outputArea.classList.add('hidden');
// Scroll to top of form
document.getElementById('jenjang').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
function toggleMateriLainnya() {
const materiSelect = document.getElementById('materi');
const materiLainnya = document.getElementById('materiLainnya');
if (materiSelect.value === 'lainnya') {
materiLainnya.classList.remove('hidden');
materiLainnya.focus();
} else {
materiLainnya.classList.add('hidden');
materiLainnya.value = '';
}
}
async function onConfigChange(newConfig) {
config = { ...defaultConfig, ...newConfig };
const appTitle = document.getElementById('app-title');
const subtitle = document.getElementById('subtitle');
const generateBtnText = document.getElementById('generate-btn-text');
if (appTitle) appTitle.textContent = config.app_title || defaultConfig.app_title;
if (subtitle) subtitle.textContent = config.subtitle || defaultConfig.subtitle;
if (generateBtnText) generateBtnText.textContent = config.generate_button_text || defaultConfig.generate_button_text;
}
function mapToCapabilities(config) {
return {
recolorables: [
{
get: () => config.background_color || defaultConfig.background_color,
set: (value) => {
config.background_color = value;
window.elementSdk.setConfig({ background_color: value });
}
},
{
get: () => config.surface_color || defaultConfig.surface_color,
set: (value) => {
config.surface_color = value;
window.elementSdk.setConfig({ surface_color: value });
}
},
{
get: () => config.text_color || defaultConfig.text_color,
set: (value) => {
config.text_color = value;
window.elementSdk.setConfig({ text_color: value });
}
},
{
get: () => config.primary_action_color || defaultConfig.primary_action_color,
set: (value) => {
config.primary_action_color = value;
window.elementSdk.setConfig({ primary_action_color: value });
}
},
{
get: () => config.secondary_action_color || defaultConfig.secondary_action_color,
set: (value) => {
config.secondary_action_color = value;
window.elementSdk.setConfig({ secondary_action_color: value });
}
}
],
borderables: [],
fontEditable: undefined,
fontSizeable: undefined
};
}
function mapToEditPanelValues(config) {
return new Map([
['app_title', config.app_title || defaultConfig.app_title],
['subtitle', config.subtitle || defaultConfig.subtitle],
['generate_button_text', config.generate_button_text || defaultConfig.generate_button_text]
]);
}
// Initialize
document.getElementById('generateBtn').addEventListener('click', generatePrompt);
document.getElementById('copyBtn').addEventListener('click', copyToClipboard);
document.getElementById('resetBtn').addEventListener('click', resetForm);
document.getElementById('materi').addEventListener('change', toggleMateriLainnya);
// Initialize Element SDK
if (window.elementSdk) {
window.elementSdk.init({
defaultConfig,
onConfigChange,
mapToCapabilities,
mapToEditPanelValues
});
}