Hi,
i have build a custom component, first in codepen and then put it into drapcode. After this i integrated the costum component in the page. In the builder everything looks good but when i open the preview the styling is not the same and there are, what seems like, random numbers in between the words.
i have tried it in different browsers but it looks the same.
Can someone help me fix this?
Greetings
Hi @KN02,
Custom component does not loads in the builder and you can see it only in preview.
Can you share the script code which you are adding? That script may be adding those numbers.
Thanks.
Hi @vishsahu,
thank you for the quick response.
document.addEventListener('DOMContentLoaded', function() {
let recognition;
let isRecognizing = false;
let startTime;
let elapsedTime = 0;
let timerInterval;
let finalTranscript = '';
const startRecognitionBtn = document.getElementById('startRecognitionBtn');
const stopRecognitionBtn = document.getElementById('stopRecognitionBtn');
const statusBox = document.getElementById('statusBox');
const timer = document.getElementById('timer');
const transcriptionText = document.getElementById('transcriptionText');
const saveButton = document.getElementById('saveButton');
const exportButton = document.getElementById('exportButton');
if ('webkitSpeechRecognition' in window) {
recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = 'de-DE';
recognition.onstart = function() {
isRecognizing = true;
statusBox.textContent = 'Hören...';
statusBox.className = 'alert alert-success';
startRecognitionBtn.disabled = true;
stopRecognitionBtn.disabled = false;
startTimer();
};
recognition.onend = function() {
isRecognizing = false;
statusBox.textContent = 'Erkennung gestoppt.';
statusBox.className = 'alert alert-info';
startRecognitionBtn.disabled = false;
stopRecognitionBtn.disabled = true;
stopTimer();
};
recognition.onresult = function(event) {
let interimTranscript = '';
for (let i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
finalTranscript += event.results[i][0].transcript + ' ';
} else {
interimTranscript += event.results[i][0].transcript;
}
}
transcriptionText.value = finalTranscript + interimTranscript;
};
recognition.onerror = function(event) {
statusBox.textContent = 'Fehler bei der Erkennung: ' + event.error;
statusBox.className = 'alert alert-danger';
};
} else {
statusBox.textContent = 'Ihr Browser unterstützt keine Spracherkennung.';
statusBox.className = 'alert alert-danger';
startRecognitionBtn.disabled = true;
}
startRecognitionBtn.addEventListener('click', function() {
if (!isRecognizing) {
finalTranscript = '';
transcriptionText.value = '';
recognition.start();
}
});
stopRecognitionBtn.addEventListener('click', function() {
if (isRecognizing) {
recognition.stop();
}
});
function startTimer() {
startTime = Date.now() - elapsedTime;
timerInterval = setInterval(updateTimer, 1000);
}
function stopTimer() {
clearInterval(timerInterval);
}
function updateTimer() {
elapsedTime = Date.now() - startTime;
timer.textContent = formatTime(elapsedTime);
}
function formatTime(time) {
const minutes = Math.floor(time / 60000);
const seconds = ((time % 60000) / 1000).toFixed(0);
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
saveButton.addEventListener('click', function() {
const newTranscription = {
date: new Date().toLocaleDateString(),
patient: document.getElementById('patientName').value,
owner: document.getElementById('ownerName').value,
diagnosis: document.getElementById('diagnosis').value,
};
addRecentTranscription(newTranscription);
alert('Transkription erfolgreich gespeichert!');
});
exportButton.addEventListener('click', function() {
alert('Transkription erfolgreich exportiert!');
});
function addRecentTranscription(transcription) {
const recentTranscriptions = document.getElementById('recentTranscriptions');
const newRow = recentTranscriptions.insertRow(0);
newRow.innerHTML = `
<td>${transcription.date}</td>
<td>${transcription.patient}</td>
<td>${transcription.owner}</td>
<td>${transcription.diagnosis}</td>
<td>
<button class="btn btn-sm btn-primary me-1"><i class="fas fa-edit"></i></button>
<button class="btn btn-sm btn-danger"><i class="fas fa-trash"></i></button>
</td>
`;
}
});
This is the script code. I also thought of that and deleted the script and reload again but the result was the same.
Your script is generating those values. You need to get it checked.
Thanks.
I tried to delete it but for some reason it is not taking the change. I delete the entire script, click on update but when i reload the script loads again. so it does not stay deleted. i tried already to log out and log in back into my account but the problem remains.
Thanks.
Can you please try it on a new custom component?
Thanks.
Then it looks good. But i need the script. Like i said, the code it self is running fine, when i tested it outside of drapcode.
Hi @vishsahu,
Now it is working. I solved it by writing the html code directly in a section component and the script in the page settings. Then it works fine. So i think the problem is with the costum component.
Thanks