## Standard question text/media rendering
<div class="mb-3 fw-bold">$!question.text</div>

## Audio recording UI
<div data-audio-question 
     data-audio-url="$apphome/test/active/actions/submitaudio.html"
     class="p-3 border rounded bg-light">
    <div class="mb-2">
        <button type="button" class="btn btn-primary start-recording">Start Recording</button>
        <button type="button" class="btn btn-danger stop-recording" disabled>Stop Recording</button>
    </div>
    <audio class="audio-playback w-100 mt-2" controls style="display:none;"></audio>
    <div class="mt-2">
        <button type="button" class="btn btn-success submit-audio" disabled>Submit Audio</button>
    </div>
    <div class="upload-result small mt-2 text-muted"></div>
</div>

<script>
(function($){
    $('[data-audio-question]').each(function(){
        const wrapperEl    = $(this);
        let mediaRecorder;
        let chunks = [];

        const startBtn     = wrapperEl.find('.start-recording');
        const stopBtn      = wrapperEl.find('.stop-recording');
        const submitBtn    = wrapperEl.find('.submit-audio');
        const playerEl     = wrapperEl.find('.audio-playback');
        const resultEl     = wrapperEl.find('.upload-result');
        const submitUrl    = wrapperEl.attr('data-audio-url');

        startBtn.on('click', async function(){
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                chunks = [];
                mediaRecorder = new MediaRecorder(stream);
                mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) chunks.push(e.data); };
                mediaRecorder.onstop = () => {
                    const blob = new Blob(chunks, { type: 'audio/webm' });
                    const url = URL.createObjectURL(blob);
                    playerEl.attr('src', url).show();
                    wrapperEl.data('audioBlob', blob);
                    submitBtn.prop('disabled', false);
                };
                mediaRecorder.start();
                startBtn.prop('disabled', true);
                stopBtn.prop('disabled', false);
                submitBtn.prop('disabled', true);
                resultEl.text('');
            } catch (err) {
                console.error('Mic access error:', err);
            }
        });

        stopBtn.on('click', function(){
            if (mediaRecorder && mediaRecorder.state === 'recording') {
                mediaRecorder.stop();
                mediaRecorder.stream.getTracks().forEach(t => t.stop());
                startBtn.prop('disabled', false);
                stopBtn.prop('disabled', true);
            }
        });

        submitBtn.on('click', function(){
            const blob = wrapperEl.data('audioBlob');
            if (!blob) {
                resultEl.text('No recording to submit.');
                return;
            }
            const formData = new FormData();
            formData.append('audio', blob, 'recording.webm');
            resultEl.text('Uploading...');
            
            const questionIdVal = wrapperEl.closest('form').find('input[name="questionid"]').val();
            formData.append('questionid', questionIdVal);
            $.ajax({
                url: submitUrl,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(resp) {
                    resultEl.text('Upload complete.');
                    console.log('Server response:', resp);
                    // Assuming resp is just transcript text
                    wrapperEl.find('.transcript').remove(); // avoid duplicates
                    wrapperEl.append(
                        $('<div class="transcript mt-2 text-muted small"></div>').text(resp)
                    );
                },
                error: function(xhr, status, err) {
                    resultEl.text('Upload failed: ' + err);
                }
            });
        });
    });
})(jQuery);
</script>