Many thanks for the response @ryanwesslen !
I have tried incorporating the example codes into my task:
1), adding the code below as custom.js
function toggle(id) {
var x = document.getElementById(id);
if (id == "a"){
reset("b")
}else{
reset("a")
}
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function reset(id){
var x = document.getElementById(id);
x.style.display = "none"
var checkboxes = document.getElementsByClassName("checkbox");
for(let elem in checkboxes){
checkboxes[elem].checked = false;
}
}
function update(){
var checkboxes = document.getElementsByClassName("checkbox");
var results = [];
for(let elem in checkboxes){
if(checkboxes[elem].checked){
results.push(checkboxes[elem].id)
}
}
prodigy.update({
selected: results
})
}
document.addEventListener('prodigyanswer', event => {
reset("a")
reset("b")
})
2), adding the code below as template.jinja2
<button onclick="toggle('a')">Option A</button>
<div id="a" style="display: none;">
<form style="display: block;">
{%- for reason in options["a"] -%}
<input type="checkbox" class="checkbox" id="{{reason}}" name="{{reason}}" onchange="update()" style="margin: 0.4rem;"><label for="{{reason}}">{{reason}}</label><br>
{%- endfor -%}
</form>
</div>
<button onclick="toggle('b')">Option B</button>
<div id="b" style="display: none;">
<form style="display: block;">
{%- for reason in options["b"] -%}
<input type="checkbox" class="checkbox" id="{{reason}}" name="{{reason}}" onchange="update()" style="margin: 0.4rem;"><label for="{{reason}}">{{reason}}</label><br>
{%- endfor -%}
</form>
</div>
3), and my prodigy recipe is as simple as it can gets:
import jinja2
from typing import Union
from pathlib import Path
import prodigy
from prodigy.util import msg
from prodigy import set_hashes
from prodigy.components.loaders import JSONL
@prodigy.recipe(
"sdoh-test",
dataset=("The dataset to save to", "positional", None, str),
file_in=("Path to texts", "positional", None, str),
)
def textcat_w_comments(dataset, file_in):
options = [
{
"a": [
"sub-option a1",
"sub-option a2"
]
},
{
"b": [
"sub-option b1",
"sub-option b2"
]
},
]
def add_template(stream):
for ex in stream:
ex['html'] = template.render(options=options)
yield set_hashes(ex)
def before_db(examples):
for ex in examples:
del ex['html']
print(examples)
return examples
template = load_template("template.jinja2")
custom_js = Path("custom.js").read_text()
stream = JSONL(file_in)
blocks = [
{"view_id": "text"},
{"view_id": "html"},
]
return {
"view_id": "blocks",
"dataset": dataset,
"stream": add_template(stream),
"config": {
"blocks": blocks,
"javascript": custom_js,
},
"before_db": before_db
}
def load_template(path: Union[str, Path]) -> jinja2.Template:
if not isinstance(path, Path):
path = Path(path)
if not path.suffix == ".jinja2":
msg.fail(
"Must supply jinja2 file.",
exits=1,
)
with path.open("r", encoding="utf8") as file_:
text = file_.read()
return jinja2.Template(text, undefined=jinja2.DebugUndefined)
The result is the two options (A and B) are displayed on the interface as well as the text to annotate, but, there is no response when I click on the options. the sub options/categories do not appear at all. It's strange since my code should be very similar if the same as the example code you kindly referred me to. I am wondering if there is anything obvious I am missing...
