shmup/clarc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix QuestionPrompt to iterate questions array

Browse source 
QuestionPrompt has a questions array, not flat fields. Updated rendering
to iterate over each question item with its own header, question text,
and options.
This commit is contained in:
Jared Miller 2026-01-28 13:02:45 -05:00
parent caef206d51
commit 419034255a
Signed by: shmup
GPG key ID: 22B5C6D66A38B06C
1 changed files with 30 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
public/index.html
View file

@ -621,36 +621,45 @@
function renderQuestionPrompt(p) { function renderQuestionPrompt(p) {
const json = p.json; const json = p.json;
const header = json.header || ''; const questions = json.questions || [];
const question = json.question || p.text;
const options = json.options || []; const questionsHtml = questions.map((q, qIdx) => {
const multiSelect = json.multi_select || false; const header = q.header || '';
const allowsOther = json.allows_other || false; const question = q.question || '';
const options = q.options || [];
const multiSelect = q.multi_select || false;
const allowsOther = q.allows_other || false;
const inputType = multiSelect ? 'checkbox' : 'radio'; const inputType = multiSelect ? 'checkbox' : 'radio';
const inputName = `prompt-${p.id}-${qIdx}`;
const optionsHtml = options.map((opt, idx) => ` const optionsHtml = options.map((opt, idx) => `
<label class="prompt-option" onclick="selectOption('${p.id}', ${idx})"> <label class="prompt-option" onclick="selectOption('${p.id}', ${idx})">
<input type="${inputType}" name="prompt-${p.id}" value="${escapeHtml(opt)}"> <input type="${inputType}" name="${inputName}" value="${escapeHtml(opt.value)}">
<span class="prompt-option-label">${escapeHtml(opt)}</span> <span class="prompt-option-label">${escapeHtml(opt.label)}</span>
</label> </label>
`).join(''); `).join('');
const otherHtml = allowsOther ? ` const otherHtml = allowsOther ? `
<label class="prompt-option"> <label class="prompt-option">
<input type="${inputType}" name="prompt-${p.id}" value="__other__" onclick="enableOtherInput('${p.id}')"> <input type="${inputType}" name="${inputName}" value="__other__" onclick="enableOtherInput('${p.id}-${qIdx}')">
<span class="prompt-option-label">Other</span> <span class="prompt-option-label">Other</span>
</label> </label>
<input type="text" class="prompt-other-input" id="other-${p.id}" placeholder="Enter your answer..." disabled> <input type="text" class="prompt-other-input" id="other-${p.id}-${qIdx}" placeholder="Enter your answer..." disabled>
` : ''; ` : '';
return ` return `
<div class="prompt" data-prompt="${p.id}">
${header ? `<div class="prompt-header">${escapeHtml(header)}</div>` : ''} ${header ? `<div class="prompt-header">${escapeHtml(header)}</div>` : ''}
<div class="prompt-question">${escapeHtml(question)}</div> <div class="prompt-question">${escapeHtml(question)}</div>
<div class="prompt-options"> <div class="prompt-options">
${optionsHtml} ${optionsHtml}
${otherHtml} ${otherHtml}
</div> </div>
`;
}).join('');
return `
<div class="prompt" data-prompt="${p.id}">
${questionsHtml}
<div class="prompt-actions"> <div class="prompt-actions">
<button class="btn btn-submit" onclick="submitRichPrompt('${p.id}')">Submit</button> <button class="btn btn-submit" onclick="submitRichPrompt('${p.id}')">Submit</button>
</div> </div>