Spaces:
Paused
Paused
File size: 7,836 Bytes
210f44b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 | <!-- CONFIG_HASH: 6040918e61da2c3bd676690bf814c65e_23f28b3de898677df10a542c3e7b9a3b -->
<!-- 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="response_quality" class="annotation-form ranking shadcn-ranking-container"
data-annotation-id="0"
data-annotation-type="ranking"
data-schema-name="response_quality"
data-grid-columns="1">
<fieldset schema="response_quality">
<legend class="shadcn-ranking-title">Rank the responses from best (1st) to worst (last) based on helpfulness and accuracy</legend>
<p class="schema-help-text">Drag to reorder, or use the arrow buttons</p>
<input type="hidden"
class="annotation-input ranking-order-input"
id="response_quality_rank_order_hidden"
name="response_quality:::rank_order"
schema="response_quality"
label_name="rank_order"
validation=""
value="Response A,Response B,Response C,Response D"
data-modified="true">
<div class="ranking-list" id="ranking-list-response_quality" data-schema="response_quality">
<div class="ranking-item" draggable="true" data-value="Response A" >
<span class="ranking-handle">☰</span>
<span class="ranking-rank">1</span>
<span class="ranking-label">Response A</span>
<div class="ranking-buttons">
<button type="button" class="ranking-up" title="Move up" aria-label="Move up">▲</button>
<button type="button" class="ranking-down" title="Move down" aria-label="Move down">▼</button>
</div>
</div>
<div class="ranking-item" draggable="true" data-value="Response B" >
<span class="ranking-handle">☰</span>
<span class="ranking-rank">2</span>
<span class="ranking-label">Response B</span>
<div class="ranking-buttons">
<button type="button" class="ranking-up" title="Move up" aria-label="Move up">▲</button>
<button type="button" class="ranking-down" title="Move down" aria-label="Move down">▼</button>
</div>
</div>
<div class="ranking-item" draggable="true" data-value="Response C" >
<span class="ranking-handle">☰</span>
<span class="ranking-rank">3</span>
<span class="ranking-label">Response C</span>
<div class="ranking-buttons">
<button type="button" class="ranking-up" title="Move up" aria-label="Move up">▲</button>
<button type="button" class="ranking-down" title="Move down" aria-label="Move down">▼</button>
</div>
</div>
<div class="ranking-item" draggable="true" data-value="Response D" >
<span class="ranking-handle">☰</span>
<span class="ranking-rank">4</span>
<span class="ranking-label">Response D</span>
<div class="ranking-buttons">
<button type="button" class="ranking-up" title="Move up" aria-label="Move up">▲</button>
<button type="button" class="ranking-down" title="Move down" aria-label="Move down">▼</button>
</div>
</div>
</div>
</fieldset>
</form>
<script>
(function() {
const schema = "response_quality";
const list = document.getElementById('ranking-list-' + schema);
const hiddenInput = list.parentElement.querySelector('.ranking-order-input');
function updateOrder() {
const items = list.querySelectorAll('.ranking-item');
const order = [];
items.forEach((item, idx) => {
item.querySelector('.ranking-rank').textContent = idx + 1;
order.push(item.getAttribute('data-value'));
});
hiddenInput.value = order.join(',');
hiddenInput.setAttribute('data-modified', 'true');
hiddenInput.dispatchEvent(new Event('change', { bubbles: true }));
}
// Drag and drop
let draggedItem = null;
list.addEventListener('dragstart', function(e) {
draggedItem = e.target.closest('.ranking-item');
if (draggedItem) {
draggedItem.classList.add('dragging');
e.dataTransfer.effectAllowed = 'move';
}
});
list.addEventListener('dragend', function(e) {
if (draggedItem) {
draggedItem.classList.remove('dragging');
draggedItem = null;
}
list.querySelectorAll('.ranking-item').forEach(item => {
item.classList.remove('drag-over');
});
});
list.addEventListener('dragover', function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
const target = e.target.closest('.ranking-item');
if (target && target !== draggedItem) {
const rect = target.getBoundingClientRect();
const midY = rect.top + rect.height / 2;
list.querySelectorAll('.ranking-item').forEach(item => item.classList.remove('drag-over'));
target.classList.add('drag-over');
if (e.clientY < midY) {
list.insertBefore(draggedItem, target);
} else {
list.insertBefore(draggedItem, target.nextSibling);
}
}
});
list.addEventListener('drop', function(e) {
e.preventDefault();
updateOrder();
});
// Button controls
list.addEventListener('click', function(e) {
const btn = e.target.closest('.ranking-up, .ranking-down');
if (!btn) return;
e.preventDefault();
const item = btn.closest('.ranking-item');
if (btn.classList.contains('ranking-up') && item.previousElementSibling) {
list.insertBefore(item, item.previousElementSibling);
updateOrder();
} else if (btn.classList.contains('ranking-down') && item.nextElementSibling) {
list.insertBefore(item.nextElementSibling, item);
updateOrder();
}
});
// Keyboard controls
list.addEventListener('keydown', function(e) {
if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
const item = document.activeElement.closest('.ranking-item');
if (!item) return;
e.preventDefault();
if (e.key === 'ArrowUp' && item.previousElementSibling) {
list.insertBefore(item, item.previousElementSibling);
updateOrder();
item.focus();
} else if (e.key === 'ArrowDown' && item.nextElementSibling) {
list.insertBefore(item.nextElementSibling, item);
updateOrder();
item.focus();
}
});
updateOrder();
})();
</script>
</div>
|