updated based on T's feedback
This commit is contained in:
@@ -90,63 +90,6 @@ import { ParameterType } from 'jspsych';
|
||||
margin: 5px;
|
||||
">Accept Recording</button>
|
||||
</div>
|
||||
<div id="questions-section" style="display: none; margin: 20px; text-align: left; max-width: 600px; margin-left: auto; margin-right: auto;">
|
||||
<audio id="final-playback-audio" controls style="display: block; margin: 10px auto;"></audio>
|
||||
<h3 style="text-align: center; margin-bottom: 20px;">Please answer the following questions:</h3>
|
||||
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label for="spelling-input" style="display: block; margin-bottom: 5px; font-weight: bold;">How would you spell what you have just recorded?</label>
|
||||
<input type="text" id="spelling-input" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" required>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label for="language-select" style="display: block; margin-bottom: 5px; font-weight: bold;">What language is it in?</label>
|
||||
<select id="language-select" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" required>
|
||||
<option value="">Select a language...</option>
|
||||
<option value="English">English</option>
|
||||
<option value="Spanish">Spanish</option>
|
||||
<option value="French">French</option>
|
||||
<option value="German">German</option>
|
||||
<option value="Italian">Italian</option>
|
||||
<option value="Portuguese">Portuguese</option>
|
||||
<option value="Russian">Russian</option>
|
||||
<option value="Chinese">Chinese</option>
|
||||
<option value="Japanese">Japanese</option>
|
||||
<option value="Korean">Korean</option>
|
||||
<option value="Arabic">Arabic</option>
|
||||
<option value="Hindi">Hindi</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="other-language-section" style="margin-bottom: 15px; display: none;">
|
||||
<label for="other-language-input" style="display: block; margin-bottom: 5px; font-weight: bold;">Please specify the language:</label>
|
||||
<input type="text" id="other-language-input" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
|
||||
</div>
|
||||
|
||||
<div id="translation-section" style="margin-bottom: 15px; display: none;">
|
||||
<label for="translation-input" style="display: block; margin-bottom: 5px; font-weight: bold;">How would you translate it to English?</label>
|
||||
<input type="text" id="translation-input" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label for="meaning-input" style="display: block; margin-bottom: 5px; font-weight: bold;">Does it have a meaning? If so, write it here in English:</label>
|
||||
<input type="text" id="meaning-input" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" placeholder="Write the meaning or 'No meaning' if it doesn't have one">
|
||||
</div>
|
||||
|
||||
<button id="submit-answers-button" style="
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
background-color: #007cba;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
opacity: 0.5;
|
||||
" disabled>Submit Answers</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -295,84 +238,10 @@ import { ParameterType } from 'jspsych';
|
||||
});
|
||||
|
||||
acceptButton.addEventListener("click", () => {
|
||||
document.getElementById("recording-controls").style.display = "none";
|
||||
document.getElementById("questions-section").style.display = "block";
|
||||
|
||||
const finalAudio = document.getElementById("final-playback-audio");
|
||||
const originalAudio = document.getElementById("playback-audio");
|
||||
finalAudio.src = originalAudio.src;
|
||||
|
||||
document.getElementById("recording-status").textContent = "Please answer all questions to continue:";
|
||||
|
||||
this.setupQuestionEvents(trial);
|
||||
this.endTrial(trial);
|
||||
});
|
||||
}
|
||||
|
||||
setupQuestionEvents(trial) {
|
||||
const spellingInput = document.getElementById("spelling-input");
|
||||
const languageSelect = document.getElementById("language-select");
|
||||
const otherLanguageSection = document.getElementById("other-language-section");
|
||||
const otherLanguageInput = document.getElementById("other-language-input");
|
||||
const translationSection = document.getElementById("translation-section");
|
||||
const translationInput = document.getElementById("translation-input");
|
||||
const meaningInput = document.getElementById("meaning-input");
|
||||
const submitButton = document.getElementById("submit-answers-button");
|
||||
|
||||
const validateForm = () => {
|
||||
const spelling = spellingInput.value.trim();
|
||||
const language = languageSelect.value;
|
||||
const otherLanguage = otherLanguageInput.value.trim();
|
||||
const meaning = meaningInput.value.trim();
|
||||
const needsOtherLanguage = language === "Other";
|
||||
const needsTranslation = language && language !== "English";
|
||||
const translation = translationInput.value.trim();
|
||||
|
||||
const isValid = spelling && language && meaning &&
|
||||
(!needsOtherLanguage || otherLanguage) &&
|
||||
(!needsTranslation || translation);
|
||||
|
||||
submitButton.disabled = !isValid;
|
||||
submitButton.style.opacity = isValid ? "1" : "0.5";
|
||||
submitButton.style.cursor = isValid ? "pointer" : "not-allowed";
|
||||
};
|
||||
|
||||
languageSelect.addEventListener("change", () => {
|
||||
const selectedLanguage = languageSelect.value;
|
||||
const isEnglish = selectedLanguage === "English";
|
||||
const isOther = selectedLanguage === "Other";
|
||||
|
||||
translationSection.style.display = isEnglish ? "none" : "block";
|
||||
otherLanguageSection.style.display = isOther ? "block" : "none";
|
||||
|
||||
if (isEnglish) {
|
||||
translationInput.value = "";
|
||||
}
|
||||
if (!isOther) {
|
||||
otherLanguageInput.value = "";
|
||||
}
|
||||
validateForm();
|
||||
});
|
||||
|
||||
[spellingInput, languageSelect, otherLanguageInput, translationInput, meaningInput].forEach(element => {
|
||||
element.addEventListener("input", validateForm);
|
||||
element.addEventListener("change", validateForm);
|
||||
});
|
||||
|
||||
submitButton.addEventListener("click", () => {
|
||||
if (!submitButton.disabled) {
|
||||
const finalLanguage = languageSelect.value === "Other" ?
|
||||
otherLanguageInput.value.trim() :
|
||||
languageSelect.value;
|
||||
|
||||
this.endTrialWithAnswers(trial, {
|
||||
spelling: spellingInput.value.trim(),
|
||||
language: finalLanguage,
|
||||
translation: translationInput.value.trim() || null,
|
||||
meaning: meaningInput.value.trim()
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
startRecording() {
|
||||
try {
|
||||
@@ -396,7 +265,7 @@ import { ParameterType } from 'jspsych';
|
||||
}
|
||||
}
|
||||
|
||||
endTrialWithAnswers(trial, answers) {
|
||||
endTrial(trial) {
|
||||
this.recorder.removeEventListener("dataavailable", this.data_available_handler);
|
||||
this.recorder.removeEventListener("start", this.start_event_handler);
|
||||
this.recorder.removeEventListener("stop", this.stop_event_handler);
|
||||
@@ -412,10 +281,6 @@ import { ParameterType } from 'jspsych';
|
||||
stimulus: trial.stimulus,
|
||||
response: response,
|
||||
estimated_stimulus_onset: this.recorder_start_time ? Math.round(this.stimulus_start_time - this.recorder_start_time) : null,
|
||||
spelling: answers.spelling,
|
||||
language: answers.language,
|
||||
translation: answers.translation,
|
||||
meaning: answers.meaning,
|
||||
audio_duration: this.audio_duration
|
||||
};
|
||||
|
||||
@@ -430,47 +295,11 @@ import { ParameterType } from 'jspsych';
|
||||
stimulus: trial.stimulus,
|
||||
response: null,
|
||||
estimated_stimulus_onset: null,
|
||||
spelling: answers.spelling,
|
||||
language: answers.language,
|
||||
translation: answers.translation,
|
||||
meaning: answers.meaning,
|
||||
audio_duration: this.audio_duration
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
endTrial(display_element, trial) {
|
||||
this.recorder.removeEventListener("dataavailable", this.data_available_handler);
|
||||
this.recorder.removeEventListener("start", this.start_event_handler);
|
||||
this.recorder.removeEventListener("stop", this.stop_event_handler);
|
||||
|
||||
this.jsPsych.pluginAPI.clearAllTimeouts();
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.addEventListener("load", () => {
|
||||
const response = reader.result.split(",")[1];
|
||||
|
||||
let trial_data = {
|
||||
rt: this.stimulus_start_time ? Date.now() - this.stimulus_start_time : null,
|
||||
stimulus: trial.stimulus,
|
||||
response: response,
|
||||
estimated_stimulus_onset: this.recorder_start_time ? Math.round(this.stimulus_start_time - this.recorder_start_time) : null,
|
||||
};
|
||||
|
||||
this.jsPsych.finishTrial(trial_data);
|
||||
});
|
||||
|
||||
if (this.current_recording) {
|
||||
reader.readAsDataURL(this.current_recording);
|
||||
} else {
|
||||
this.jsPsych.finishTrial({
|
||||
rt: null,
|
||||
stimulus: trial.stimulus,
|
||||
response: null,
|
||||
estimated_stimulus_onset: null,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default jsPsychRecordCall;
|
||||
Reference in New Issue
Block a user