layouts/task_layout.html

<!-- CONFIG_HASH: 5a38ddae4828f54c72c821f1e22c04ea_274c626cf925b6aafe5b91d3bd829025 -->
<!-- Generated annotation layout file -->
<!-- This file was automatically generated based on the annotation schemes in your config -->
<!-- You can customize this file to modify the layout of your annotation interface -->
<!-- Changes to this file will be preserved across server restarts -->

<div class="annotation_schema">

        <form id="selection_header" class="annotation-form pure-display" action="javascript:void(0)" data-grid-columns="1">
            <fieldset schema="selection_header">
                <legend>## Selection Types</legend>
                <div class="display-content">
                    
                </div>
            </fieldset>
        </form>
    

    <form id="single_choice" class="annotation-form radio shadcn-radio-container" action="javascript:void(0)" data-annotation-id="1" data-annotation-type="radio" data-schema-name="single_choice" data-grid-columns="1">
        
        <fieldset schema="single_choice">
            <legend class="shadcn-radio-title">**Radio Buttons** - Select exactly one option</legend>
            <div class="shadcn-radio-options">
    
            <div class="shadcn-radio-option">
                <input class="single_choice shadcn-radio-input annotation-input"
                       type="radio"
                       id="single_choice_positive_radio"
                       name="single_choice"
                       value="positive"
                       selection_constraint="single"
                       schema="single_choice"
                       label_name="positive"
                       onclick="onlyOne(this);registerAnnotation(this);"
                       validation=""
                       data-key="1">
                <label for="single_choice_positive_radio" class="shadcn-radio-label" data-toggle="tooltip" data-html="true" data-placement="top" title="The text expresses positive sentiment">Positive <span class="keybinding-badge">1</span></label>
            </div>
        
            <div class="shadcn-radio-option">
                <input class="single_choice shadcn-radio-input annotation-input"
                       type="radio"
                       id="single_choice_neutral_radio"
                       name="single_choice"
                       value="neutral"
                       selection_constraint="single"
                       schema="single_choice"
                       label_name="neutral"
                       onclick="onlyOne(this);registerAnnotation(this);"
                       validation=""
                       data-key="2">
                <label for="single_choice_neutral_radio" class="shadcn-radio-label" data-toggle="tooltip" data-html="true" data-placement="top" title="The text is neutral or factual">Neutral <span class="keybinding-badge">2</span></label>
            </div>
        
            <div class="shadcn-radio-option">
                <input class="single_choice shadcn-radio-input annotation-input"
                       type="radio"
                       id="single_choice_negative_radio"
                       name="single_choice"
                       value="negative"
                       selection_constraint="single"
                       schema="single_choice"
                       label_name="negative"
                       onclick="onlyOne(this);registerAnnotation(this);"
                       validation=""
                       data-key="3">
                <label for="single_choice_negative_radio" class="shadcn-radio-label" data-toggle="tooltip" data-html="true" data-placement="top" title="The text expresses negative sentiment">Negative <span class="keybinding-badge">3</span></label>
            </div>
        </div></fieldset></form>

    <form id="multi_choice" class="annotation-form multiselect shadcn-multiselect-container" action="javascript:void(0)" data-annotation-id="2" data-annotation-type="multiselect" data-schema-name="multi_choice" data-grid-columns="1">
        
        <fieldset schema="multi_choice">
            <legend class="shadcn-multiselect-title">**Checkboxes** - Select all that apply</legend>
    <div class="shadcn-multiselect-grid" style="grid-template-columns: repeat(1, 1fr);">
            <div class="shadcn-multiselect-item">
                <input class="multi_choice shadcn-multiselect-checkbox annotation-input"
                       type="checkbox"
                       id="multi_choice_informative_checkbox"
                       name="multi_choice:::informative"
                       value="informative"
                       label_name="informative"
                       schema="multi_choice"
                       onclick="whetherNone(this);registerAnnotation(this)"
                       validation="" data-key="q">
                <label for="multi_choice_informative_checkbox" data-toggle="tooltip" data-html="true" data-placement="top" title="Contains factual information" schema="multi_choice" class="shadcn-multiselect-label">
                    Informative <span class="keybinding-badge shadcn-multiselect-key">Q</span>
                </label>
            </div>
        
            <div class="shadcn-multiselect-item">
                <input class="multi_choice shadcn-multiselect-checkbox annotation-input"
                       type="checkbox"
                       id="multi_choice_emotional_checkbox"
                       name="multi_choice:::emotional"
                       value="emotional"
                       label_name="emotional"
                       schema="multi_choice"
                       onclick="whetherNone(this);registerAnnotation(this)"
                       validation="" data-key="w">
                <label for="multi_choice_emotional_checkbox" data-toggle="tooltip" data-html="true" data-placement="top" title="Contains emotional language" schema="multi_choice" class="shadcn-multiselect-label">
                    Emotional <span class="keybinding-badge shadcn-multiselect-key">W</span>
                </label>
            </div>
        
            <div class="shadcn-multiselect-item">
                <input class="multi_choice shadcn-multiselect-checkbox annotation-input"
                       type="checkbox"
                       id="multi_choice_persuasive_checkbox"
                       name="multi_choice:::persuasive"
                       value="persuasive"
                       label_name="persuasive"
                       schema="multi_choice"
                       onclick="whetherNone(this);registerAnnotation(this)"
                       validation="" data-key="r">
                <label for="multi_choice_persuasive_checkbox" data-toggle="tooltip" data-html="true" data-placement="top" title="Attempts to convince the reader" schema="multi_choice" class="shadcn-multiselect-label">
                    Persuasive <span class="keybinding-badge shadcn-multiselect-key">R</span>
                </label>
            </div>
        
            <div class="shadcn-multiselect-item">
                <input class="multi_choice shadcn-multiselect-checkbox annotation-input"
                       type="checkbox"
                       id="multi_choice_unclear_checkbox"
                       name="multi_choice:::unclear"
                       value="unclear"
                       label_name="unclear"
                       schema="multi_choice"
                       onclick="whetherNone(this);registerAnnotation(this)"
                       validation="" data-key="t">
                <label for="multi_choice_unclear_checkbox" data-toggle="tooltip" data-html="true" data-placement="top" title="Meaning is ambiguous" schema="multi_choice" class="shadcn-multiselect-label">
                    Unclear <span class="keybinding-badge shadcn-multiselect-key">T</span>
                </label>
            </div>
        </div></fieldset></form>
<form id="dropdown_choice" class="annotation-form select" action="javascript:void(0)" data-annotation-id="3" data-annotation-type="select" data-schema-name="dropdown_choice" data-grid-columns="1">       <fieldset>  <legend>**Dropdown** - Select from a list</legend>  <select type="select-one" class="**Dropdown** - Select from a list annotation-input" id="dropdown_choice_select-one_select" name="dropdown_choice:::select-one" validation="" schema="dropdown_choice" label_name="select-one"><option class="dropdown_choice" id="dropdown_choice_news_option" name="dropdown_choice:::news" value="news">news</option><option class="dropdown_choice" id="dropdown_choice_opinion_option" name="dropdown_choice:::opinion" value="opinion">opinion</option><option class="dropdown_choice" id="dropdown_choice_review_option" name="dropdown_choice:::review" value="review">review</option><option class="dropdown_choice" id="dropdown_choice_social_media_option" name="dropdown_choice:::social_media" value="social_media">social_media</option><option class="dropdown_choice" id="dropdown_choice_academic_option" name="dropdown_choice:::academic" value="academic">academic</option><option class="dropdown_choice" id="dropdown_choice_other_option" name="dropdown_choice:::other" value="other">other</option>  </select>
</fieldset>
</form>


        <form id="scale_header" class="annotation-form pure-display" action="javascript:void(0)" data-grid-columns="1">
            <fieldset schema="scale_header">
                <legend>## Scale &amp; Rating Types</legend>
                <div class="display-content">
                    
                </div>
            </fieldset>
        </form>
    

    <form id="likert_scale" class="annotation-form likert shadcn-likert-container" action="javascript:void(0)" data-annotation-id="5" data-annotation-type="likert" data-schema-name="likert_scale" data-grid-columns="1">
        
        <fieldset schema="likert_scale">
            <legend class="shadcn-likert-title">**Likert Scale** - Rate on a scale with labeled endpoints</legend>
            <div class="shadcn-likert-scale" style="max-width: min(100%, calc(300px + 5 * 40px + 250px));">
                <div class="shadcn-likert-endpoint">Strongly Disagree</div>
                <div class="shadcn-likert-options">
                    <div class="shadcn-likert-track"></div>
    
                    <div class="shadcn-likert-option">
                        <input class="likert_scale shadcn-likert-input annotation-input"
                               type="radio"
                               id="likert_scale_1_radio"
                               name="likert_scale"
                               value="1"
                               schema="likert_scale"
                               label_name="1"
                               selection_constraint="single"
                               validation=""
                               onclick="onlyOne(this);registerAnnotation(this);">
                        <label class="shadcn-likert-button" for="likert_scale_1_radio"></label>
                        <span class="shadcn-likert-label">1</span>
                    </div>
        
                    <div class="shadcn-likert-option">
                        <input class="likert_scale shadcn-likert-input annotation-input"
                               type="radio"
                               id="likert_scale_2_radio"
                               name="likert_scale"
                               value="2"
                               schema="likert_scale"
                               label_name="2"
                               selection_constraint="single"
                               validation=""
                               onclick="onlyOne(this);registerAnnotation(this);">
                        <label class="shadcn-likert-button" for="likert_scale_2_radio"></label>
                        <span class="shadcn-likert-label">2</span>
                    </div>
        
                    <div class="shadcn-likert-option">
                        <input class="likert_scale shadcn-likert-input annotation-input"
                               type="radio"
                               id="likert_scale_3_radio"
                               name="likert_scale"
                               value="3"
                               schema="likert_scale"
                               label_name="3"
                               selection_constraint="single"
                               validation=""
                               onclick="onlyOne(this);registerAnnotation(this);">
                        <label class="shadcn-likert-button" for="likert_scale_3_radio"></label>
                        <span class="shadcn-likert-label">3</span>
                    </div>
        
                    <div class="shadcn-likert-option">
                        <input class="likert_scale shadcn-likert-input annotation-input"
                               type="radio"
                               id="likert_scale_4_radio"
                               name="likert_scale"
                               value="4"
                               schema="likert_scale"
                               label_name="4"
                               selection_constraint="single"
                               validation=""
                               onclick="onlyOne(this);registerAnnotation(this);">
                        <label class="shadcn-likert-button" for="likert_scale_4_radio"></label>
                        <span class="shadcn-likert-label">4</span>
                    </div>
        
                    <div class="shadcn-likert-option">
                        <input class="likert_scale shadcn-likert-input annotation-input"
                               type="radio"
                               id="likert_scale_5_radio"
                               name="likert_scale"
                               value="5"
                               schema="likert_scale"
                               label_name="5"
                               selection_constraint="single"
                               validation=""
                               onclick="onlyOne(this);registerAnnotation(this);">
                        <label class="shadcn-likert-button" for="likert_scale_5_radio"></label>
                        <span class="shadcn-likert-label">5</span>
                    </div>
        
                </div>
                <div class="shadcn-likert-endpoint">Strongly Agree</div>
            </div>
    
        </fieldset></form>
    

    <form id="slider_rating" class="annotation-form slider" action="javascript:void(0)" data-annotation-id="6" >
            
        <fieldset schema="slider_rating">
            <legend class="custom-slider-title">**Slider** - Select a value in a continuous range</legend>

            <div class="custom-slider-container" id="customSlider_slider_rating_slider_range" tabindex="0">
                <!-- Hidden actual input for form submission -->
                <input type="range"
                    min="0"
                    max="100"
                    step="1"
                    value="50"
                    class="custom-slider-input annotation-input"
                    onclick="registerAnnotation(this);"
                    oninput="updateCustomSlider(this);"
                    label_name="slider"
                    name="slider_rating:::slider"
                    id="slider_rating_slider_range"
                    schema="slider_rating"
                    validation="">

                <!-- Custom visual elements -->
                <div class="custom-slider-track">
                    <div class="custom-slider-track-active" id="sliderTrackActive_slider_rating_slider_range"></div>
                    <div class="custom-slider-thumb" id="sliderThumb_slider_rating_slider_range">
                        <!-- Tooltip attached directly to thumb -->
                        <div class="slider-tooltip" id="sliderTooltip_slider_rating_slider_range">50</div>
                    </div>
                </div>
                <div class="custom-slider-ticks" id="sliderTicks_slider_rating_slider_range"></div>
            </div>
        </fieldset>
    </form>

    <script>
        // Initialize the slider on page load
        (function() {
            const sliderId = "slider_rating_slider_range";
            const sliderInput = document.getElementById(sliderId);
            
            if (!sliderInput) return;
            
            // Set up the slider initially
            setupCustomSlider(sliderInput);
            
            // Update positions on input change
            sliderInput.addEventListener('input', function() {
                updateCustomSlider(this);
            });
        })();
        
        function setupCustomSlider(sliderInput) {
            const sliderId = sliderInput.id;
            const min = parseInt(sliderInput.min);
            const max = parseInt(sliderInput.max);
            const step = parseInt(sliderInput.step) || 1;
            
            // Get references to custom elements
            const container = document.getElementById('customSlider_' + sliderId);
            const sliderThumb = document.getElementById('sliderThumb_' + sliderId);
            const sliderTrackActive = document.getElementById('sliderTrackActive_' + sliderId);
            const sliderTicks = document.getElementById('sliderTicks_' + sliderId);
            const tooltip = document.getElementById('sliderTooltip_' + sliderId);
            
            if (!container || !sliderThumb || !sliderTrackActive || !sliderTicks || !tooltip) return;
            
            // Initialize slider position
            updateSliderPosition(50, min, max, sliderThumb, sliderTrackActive, tooltip);
            
            // Create tick marks
            createTicks(min, max, step, sliderTicks);
            
            container.addEventListener('click', function(e) {
                // Skip if the click is on the input or thumb (to prevent jumps during dragging)
                if (e.target === sliderThumb || e.target === sliderInput) return;
                
                // Get click position relative to the track
                const rect = container.getBoundingClientRect();
                const clickPosition = e.clientX - rect.left;
                const percentClicked = (clickPosition / rect.width) * 100;
                
                // Calculate the new value based on the click position
                let newValue = min + (percentClicked / 100) * (max - min);
                
                // Snap to the nearest step
                newValue = Math.round(newValue / step) * step;
                
                // Ensure the value is within bounds
                newValue = Math.max(min, Math.min(max, newValue));
                
                // Update the input value
                sliderInput.value = newValue;
                
                // Update the visual position
                updateSliderPosition(newValue, min, max, sliderThumb, sliderTrackActive, tooltip);
                
                // Trigger change event for any listeners
                const event = new Event('input', { bubbles: true });
                sliderInput.dispatchEvent(event);
                
                // If registerAnnotation exists, call it
                if (typeof registerAnnotation === 'function') {
                    registerAnnotation(sliderInput);
                }
            });

            // Add keyboard control
            container.addEventListener('keydown', function(e) {
                // Only process arrow keys
                if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
                
                // Prevent default to avoid page scrolling
                e.preventDefault();
                
                // Get current value
                let currentValue = parseFloat(sliderInput.value);
                
                
                // Update value based on arrow key
                if (e.key === 'ArrowDown') {
                    currentValue = Math.max(min, currentValue - step);
                } else if (e.key === 'ArrowUp') {
                    currentValue = Math.min(max, currentValue + step);
                }
                
                // Update the input value
                sliderInput.value = currentValue;
                
                // Update the visual position
                updateSliderPosition(currentValue, min, max, sliderThumb, sliderTrackActive, tooltip);
                
                // Trigger change event for any listeners
                const event = new Event('input', { bubbles: true });
                sliderInput.dispatchEvent(event);
                
                // If registerAnnotation exists, call it
                if (typeof registerAnnotation === 'function') {
                    registerAnnotation(sliderInput);
                }
            });
            
            // Add focus styles for keyboard users
            container.addEventListener('focus', function() {
                container.classList.add('focus');
            });
            
            container.addEventListener('blur', function() {
                container.classList.remove('focus');
            });
            
            // Add drag and hold functionality
            let isDragging = false;
            
            // Mouse events for drag and hold
            sliderThumb.addEventListener('mousedown', function(e) {
                isDragging = true;
                e.preventDefault(); // Prevent text selection during drag
                
                // Show tooltip during drag
                sliderThumb.classList.add('dragging');
                
                // Add event listeners for drag and release
                document.addEventListener('mousemove', handleMouseDrag);
                document.addEventListener('mouseup', stopDrag);
            });
            
            // Touch events for mobile devices
            sliderThumb.addEventListener('touchstart', function(e) {
                isDragging = true;
                e.preventDefault(); // Prevent scrolling during drag
                
                // Show tooltip during drag
                sliderThumb.classList.add('dragging');
                
                // Add event listeners for drag and release
                document.addEventListener('touchmove', handleTouchDrag);
                document.addEventListener('touchend', stopDrag);
                document.addEventListener('touchcancel', stopDrag);
            });
            
            // Handle mouse drag
            function handleMouseDrag(e) {
                if (!isDragging) return;
                
                // Get the slider's position and dimensions
                const rect = container.getBoundingClientRect();
                
                // Calculate position within the slider (constrain to slider width)
                let position = e.clientX - rect.left;
                position = Math.max(0, Math.min(position, rect.width));
                
                // Calculate value and update slider
                updateSliderFromPosition(position, rect.width);
            }
            
            // Handle touch drag
            function handleTouchDrag(e) {
                if (!isDragging || !e.touches[0]) return;
                
                const touch = e.touches[0];
                const rect = container.getBoundingClientRect();
                
                // Calculate position within the slider (constrain to slider width)
                let position = touch.clientX - rect.left;
                position = Math.max(0, Math.min(position, rect.width));
                
                // Calculate value and update slider
                updateSliderFromPosition(position, rect.width);
            }
            
            // Helper function to update slider from mouse/touch position
            function updateSliderFromPosition(position, width) {
                // Convert position to a percentage
                const percent = (position / width) * 100;
                
                // Calculate the value based on percentage
                let newValue = min + (percent / 100) * (max - min);
                
                // Snap to the nearest step
                newValue = Math.round(newValue / step) * step;
                
                // Ensure the value is within bounds
                newValue = Math.max(min, Math.min(max, newValue));
                
                // Update the input value
                sliderInput.value = newValue;
                
                // Update the visual position
                updateSliderPosition(newValue, min, max, sliderThumb, sliderTrackActive, tooltip);
                
                // Trigger change event
                const event = new Event('input', { bubbles: true });
                sliderInput.dispatchEvent(event);
                
                // If registerAnnotation exists, call it
                if (typeof registerAnnotation === 'function') {
                    registerAnnotation(sliderInput);
                }
            }
            
            // Stop dragging
            function stopDrag() {
                if (!isDragging) return;
                
                isDragging = false;
                sliderThumb.classList.remove('dragging');
                
                // Remove the event listeners
                document.removeEventListener('mousemove', handleMouseDrag);
                document.removeEventListener('touchmove', handleTouchDrag);
                document.removeEventListener('mouseup', stopDrag);
                document.removeEventListener('touchend', stopDrag);
                document.removeEventListener('touchcancel', stopDrag);
            }
        }
        
        function updateCustomSlider(sliderInput) {
            const sliderId = sliderInput.id;
            const min = parseInt(sliderInput.min);
            const max = parseInt(sliderInput.max);
            
            const sliderThumb = document.getElementById('sliderThumb_' + sliderId);
            const sliderTrackActive = document.getElementById('sliderTrackActive_' + sliderId);
            const tooltip = document.getElementById('sliderTooltip_' + sliderId);
            
            if (!sliderThumb || !sliderTrackActive || !tooltip) return;
            
            updateSliderPosition(sliderInput.value, min, max, sliderThumb, sliderTrackActive, tooltip);
        }
        
        function updateSliderPosition(value, min, max, thumbElement, trackElement, tooltipElement) {
            const percent = ((value - min) / (max - min)) * 100;
            thumbElement.style.left = `${percent}%`;
            trackElement.style.width = `${percent}%`;
            
            // Update tooltip content only - it moves with the thumb automatically
            if (tooltipElement) {
                tooltipElement.textContent = value;
            }
        }
        
        function createTicks(min, max, step, tickContainer) {
            // Clear existing ticks
            tickContainer.innerHTML = '';
            
            // Calculate optimal ticks
            const ticks = calculateOptimalTicks(min, max, step);
            
            ticks.forEach(tick => {
                const percent = ((tick.value - min) / (max - min)) * 100;
                
                const tickElement = document.createElement('div');
                tickElement.className = 'custom-slider-tick';
                tickElement.style.left = `${percent}%`;
                
                const tickMark = document.createElement('div');
                tickMark.className = tick.showLabel ? 'custom-slider-tick-mark major' : 'custom-slider-tick-mark';
                tickElement.appendChild(tickMark);
                
                if (tick.showLabel) {
                    const tickLabel = document.createElement('div');
                    tickLabel.className = 'custom-slider-tick-label';
                    tickLabel.textContent = tick.value;
                    tickElement.appendChild(tickLabel);
                }
                
                tickContainer.appendChild(tickElement);
            });
        }
        
        function calculateOptimalTicks(min, max, sliderStep, maxTicks = 8) {
            const range = max - min;
            
            // Generate all possible slider positions based on the step
            const possibleValues = [];
            for (let value = min; value <= max; value += sliderStep) {
                possibleValues.push(Math.round(value));
            }
            
            // If we have few enough values, show them all
            if (possibleValues.length <= maxTicks) {
                return possibleValues.map(value => ({ value, showLabel: true }));
            }
            
            // Calculate a "nice" interval for major ticks
            const targetInterval = range / (maxTicks - 1);
            
            // Find nice intervals: 1, 2, 5, 10, 20, 50, 100, etc.
            const candidates = [];
            for (let magnitude = 1; magnitude <= range; magnitude *= 10) {
                candidates.push(magnitude);      // 1, 10, 100...
                candidates.push(2 * magnitude);  // 2, 20, 200...
                candidates.push(5 * magnitude);  // 5, 50, 500...
            }
            
            // Choose the candidate closest to our target
            let bestInterval = candidates[0];
            let bestDiff = Math.abs(candidates[0] - targetInterval);
            
            for (const candidate of candidates) {
                const diff = Math.abs(candidate - targetInterval);
                if (diff < bestDiff) {
                    bestInterval = candidate;
                    bestDiff = diff;
                }
            }
            
            // Generate major ticks using the best interval
            const majorTicks = [];
            
            // Always start with min
            majorTicks.push({ value: min, showLabel: true });
            
            // Add ticks at nice intervals
            for (let tickValue = bestInterval; tickValue < max; tickValue += bestInterval) {
                if (tickValue > min) {
                    majorTicks.push({ value: tickValue, showLabel: true });
                }
            }
            
            // Always end with max (if it's not the same as the last tick)
            if (majorTicks[majorTicks.length - 1].value !== max) {
                majorTicks.push({ value: max, showLabel: true });
            }
            
            // Add minor ticks for values between major ticks
            const allTicks = [...majorTicks];
            
            // Only add minor ticks if there's reasonable spacing
            if (majorTicks.length > 1) {
                const majorSpacing = bestInterval;
                if (majorSpacing > sliderStep * 2) {
                    possibleValues.forEach(value => {
                        if (!allTicks.some(t => t.value === value)) {
                            allTicks.push({ value, showLabel: false });
                        }
                    });
                }
            }
            
            return allTicks.sort((a, b) => a.value - b.value);
        }
    </script>
    

<form id="multirate_matrix" class="annotation-form multirate shadcn-multirate-container" action="javascript:void(0)" data-annotation-id="7" data-grid-columns="1">
    <fieldset schema="multirate_matrix">
        <legend class="shadcn-multirate-title">**Multirate Matrix** - Rate multiple aspects on the same scale</legend>
        <table class="shadcn-multirate-table">
            <thead>
                <tr>
                    
                        <th>&nbsp;</th>
                        
                            <th>Poor</th>
                        
                            <th>Fair</th>
                        
                            <th>Good</th>
                        
                            <th>Excellent</th>
                        
                    
                </tr>
            </thead>
            <tbody>
                
                    <tr schema="multirate">
                        
                            
                                <td >Clarity</td>
                                
                                    <td class="shadcn-radio-cell">
                                        <input name="multirate_matrix:::Clarity"
                                               type="radio"
                                               id="multirate_matrix_Clarity_multirate.Poor"
                                               value="Poor"
                                               onclick="this.blur();"
                                               validation=""
                                               class="shadcn-multirate-radio annotation-input"
                                               schema="multirate_matrix"
                                               label_name="Clarity"
                                               aria-label="Clarity: Poor" />
                                    </td>
                                
                                    <td class="shadcn-radio-cell">
                                        <input name="multirate_matrix:::Clarity"
                                               type="radio"
                                               id="multirate_matrix_Clarity_multirate.Fair"
                                               value="Fair"
                                               onclick="this.blur();"
                                               validation=""
                                               class="shadcn-multirate-radio annotation-input"
                                               schema="multirate_matrix"
                                               label_name="Clarity"
                                               aria-label="Clarity: Fair" />
                                    </td>
                                
                                    <td class="shadcn-radio-cell">
                                        <input name="multirate_matrix:::Clarity"
                                               type="radio"
                                               id="multirate_matrix_Clarity_multirate.Good"
                                               value="Good"
                                               onclick="this.blur();"
                                               validation=""
                                               class="shadcn-multirate-radio annotation-input"
                                               schema="multirate_matrix"
                                               label_name="Clarity"
                                               aria-label="Clarity: Good" />
                                    </td>
                                
                                    <td class="shadcn-radio-cell">
                                        <input name="multirate_matrix:::Clarity"
                                               type="radio"
                                               id="multirate_matrix_Clarity_multirate.Excellent"
                                               value="Excellent"
                                               onclick="this.blur();"
                                               validation=""
                                               class="shadcn-multirate-radio annotation-input"
                                               schema="multirate_matrix"
                                               label_name="Clarity"
                                               aria-label="Clarity: Excellent" />
                                    </td>
                                
                            
                        
                    </tr>
                
                    <tr schema="multirate">
                        
                            
                                <td >Relevance</td>
                                
                                    <td class="shadcn-radio-cell">
                                        <input name="multirate_matrix:::Relevance"
                                               type="radio"
                                               id="multirate_matrix_Relevance_multirate.Poor"
                                               value="Poor"
                                               onclick="this.blur();"
                                               validation=""
                                               class="shadcn-multirate-radio annotation-input"
                                               schema="multirate_matrix"
                                               label_name="Relevance"
                                               aria-label="Relevance: Poor" />
                                    </td>
                                
                                    <td class="shadcn-radio-cell">
                                        <input name="multirate_matrix:::Relevance"
                                               type="radio"
                                               id="multirate_matrix_Relevance_multirate.Fair"
                                               value="Fair"
                                               onclick="this.blur();"
                                               validation=""
                                               class="shadcn-multirate-radio annotation-input"
                                               schema="multirate_matrix"
                                               label_name="Relevance"
                                               aria-label="Relevance: Fair" />
                                    </td>
                                
                                    <td class="shadcn-radio-cell">
                                        <input name="multirate_matrix:::Relevance"
                                               type="radio"
                                               id="multirate_matrix_Relevance_multirate.Good"
                                               value="Good"
                                               onclick="this.blur();"
                                               validation=""
                                               class="shadcn-multirate-radio annotation-input"
                                               schema="multirate_matrix"
                                               label_name="Relevance"
                                               aria-label="Relevance: Good" />
                                    </td>
                                
                                    <td class="shadcn-radio-cell">
                                        <input name="multirate_matrix:::Relevance"
                                               type="radio"
                                               id="multirate_matrix_Relevance_multirate.Excellent"
                                               value="Excellent"
                                               onclick="this.blur();"
                                               validation=""
                                               class="shadcn-multirate-radio annotation-input"
                                               schema="multirate_matrix"
                                               label_name="Relevance"
                                               aria-label="Relevance: Excellent" />
                                    </td>
                                
                            
                        
                    </tr>
                
                    <tr schema="multirate">
                        
                            
                                <td >Completeness</td>
                                
                                    <td class="shadcn-radio-cell">
                                        <input name="multirate_matrix:::Completeness"
                                               type="radio"
                                               id="multirate_matrix_Completeness_multirate.Poor"
                                               value="Poor"
                                               onclick="this.blur();"
                                               validation=""
                                               class="shadcn-multirate-radio annotation-input"
                                               schema="multirate_matrix"
                                               label_name="Completeness"
                                               aria-label="Completeness: Poor" />
                                    </td>
                                
                                    <td class="shadcn-radio-cell">
                                        <input name="multirate_matrix:::Completeness"
                                               type="radio"
                                               id="multirate_matrix_Completeness_multirate.Fair"
                                               value="Fair"
                                               onclick="this.blur();"
                                               validation=""
                                               class="shadcn-multirate-radio annotation-input"
                                               schema="multirate_matrix"
                                               label_name="Completeness"
                                               aria-label="Completeness: Fair" />
                                    </td>
                                
                                    <td class="shadcn-radio-cell">
                                        <input name="multirate_matrix:::Completeness"
                                               type="radio"
                                               id="multirate_matrix_Completeness_multirate.Good"
                                               value="Good"
                                               onclick="this.blur();"
                                               validation=""
                                               class="shadcn-multirate-radio annotation-input"
                                               schema="multirate_matrix"
                                               label_name="Completeness"
                                               aria-label="Completeness: Good" />
                                    </td>
                                
                                    <td class="shadcn-radio-cell">
                                        <input name="multirate_matrix:::Completeness"
                                               type="radio"
                                               id="multirate_matrix_Completeness_multirate.Excellent"
                                               value="Excellent"
                                               onclick="this.blur();"
                                               validation=""
                                               class="shadcn-multirate-radio annotation-input"
                                               schema="multirate_matrix"
                                               label_name="Completeness"
                                               aria-label="Completeness: Excellent" />
                                    </td>
                                
                            
                        
                    </tr>
                
            </tbody>
        </table>
    </fieldset>
</form>

        <form id="text_header" class="annotation-form pure-display" action="javascript:void(0)" data-grid-columns="1">
            <fieldset schema="text_header">
                <legend>## Text Input Types</legend>
                <div class="display-content">
                    
                </div>
            </fieldset>
        </form>
    

    <form id="short_answer" class="annotation-form textbox shadcn-textbox-container " action="javascript:void(0)" data-annotation-id="9" data-annotation-type="text" data-schema-name="short_answer"   data-grid-columns="1">
            
        <fieldset schema_name="short_answer">
    
            <legend class="shadcn-textbox-title">**Text Input** - Single line response</legend>
        
            <div class="shadcn-textbox-item">
                <label for="short_answer_Enter a brief summary:_text" schema="short_answer" class="shadcn-textbox-label">Enter a brief summary:</label>
        
                <input class="short_answer shadcn-textbox-input annotation-input"
                       type="text"
                       id="short_answer_Enter a brief summary:_text"
                       name="short_answer:::Enter a brief summary:"
                       validation=""
                       schema="short_answer"
                       label_name="Enter a brief summary:"
                       
                       style=""
                       >
            </div></fieldset></form>

    <form id="long_answer" class="annotation-form textbox shadcn-textbox-container " action="javascript:void(0)" data-annotation-id="10" data-annotation-type="text" data-schema-name="long_answer"   data-grid-columns="1">
            
        <fieldset schema_name="long_answer">
    
            <legend class="shadcn-textbox-title">**Textarea** - Multi-line response</legend>
        
            <div class="shadcn-textbox-item">
                <label for="long_answer_Provide detailed feedback:_text" schema="long_answer" class="shadcn-textbox-label">Provide detailed feedback:</label>
        
                <textarea class="long_answer shadcn-textbox-input shadcn-textbox-textarea annotation-input"
                          id="long_answer_Provide detailed feedback:_text"
                          name="long_answer:::Provide detailed feedback:"
                          validation=""
                          schema="long_answer"
                          label_name="Provide detailed feedback:"
                          rows='4' cols='60'
                          
                          style=""
                          ></textarea>
            </div></fieldset></form>

    <form id="numeric_input" class="annotation-form number shadcn-number-container" action="javascript:void(0)" data-annotation-id="11" data-grid-columns="1">
        
        <fieldset schema="numeric_input">
            <legend class="shadcn-number-title">**Number Input** - Enter a numeric value (e.g., word count estimate)</legend>
            <div class="shadcn-number-input">
    
                <input class="numeric_input shadcn-number-field annotation-input"
                       type="number"
                       id="numeric_input_number_number"
                       name="numeric_input:::number"
                       validation=""
                       schema="numeric_input"
                       label_name="number"
                       >
                <label for="numeric_input_number_number" ></label>
            </div>
        </fieldset>
    </form>
    

        <form id="span_header" class="annotation-form pure-display" action="javascript:void(0)" data-grid-columns="1">
            <fieldset schema="span_header">
                <legend>## Span Annotation</legend>
                <div class="display-content">
                    
                </div>
            </fieldset>
        </form>
    

    <form id="span_labels" class="annotation-form span shadcn-span-container" action="javascript:void(0)" data-annotation-id="13" data-grid-columns="1">
            
        <fieldset schema="span_labels">
            <legend class="shadcn-span-title">**Span Annotation** - Highlight text and assign labels (select text above)</legend>
            
            
            <div class="shadcn-span-options">
    
            <div class="shadcn-span-option">
                <input class="span_labels shadcn-span-checkbox"
                       for_span="true"
                       type="checkbox"
                       id="span_labels_entity"
                       name="span_label:::span_labels"
                       value="e"
                       onclick="onlyOne(this); changeSpanLabel(this, 'span_labels', 'entity', 'entity', '(110, 86, 207)', '');"
                       data-target-field=""
                       validation="">
                <label for="span_labels_entity" class="shadcn-span-label" data-toggle="tooltip" data-html="true" data-placement="top" title="Named entity (person, place, org)">
                    <span style="background-color:rgb(110, 86, 207,0.4);">entity</span>
                </label>
            </div>
        
            <div class="shadcn-span-option">
                <input class="span_labels shadcn-span-checkbox"
                       for_span="true"
                       type="checkbox"
                       id="span_labels_claim"
                       name="span_label:::span_labels"
                       value="c"
                       onclick="onlyOne(this); changeSpanLabel(this, 'span_labels', 'claim', 'claim', '(239, 68, 68)', '');"
                       data-target-field=""
                       validation="">
                <label for="span_labels_claim" class="shadcn-span-label" data-toggle="tooltip" data-html="true" data-placement="top" title="A factual claim or assertion">
                    <span style="background-color:rgb(239, 68, 68,0.4);">claim</span>
                </label>
            </div>
        
            <div class="shadcn-span-option">
                <input class="span_labels shadcn-span-checkbox"
                       for_span="true"
                       type="checkbox"
                       id="span_labels_opinion"
                       name="span_label:::span_labels"
                       value="o"
                       onclick="onlyOne(this); changeSpanLabel(this, 'span_labels', 'opinion', 'opinion', '(113, 113, 122)', '');"
                       data-target-field=""
                       validation="">
                <label for="span_labels_opinion" class="shadcn-span-label" data-toggle="tooltip" data-html="true" data-placement="top" title="Subjective opinion or judgment">
                    <span style="background-color:rgb(113, 113, 122,0.4);">opinion</span>
                </label>
            </div>
        </div></fieldset></form>

</div>