https://mathvista.github.io/static/js/question_card.js

1// let BASE_DIR = './data';
2let BASE_DIR = 'https://raw.githubusercontent.com/mathvista/data/main';
3
4function create_number(data) {
5    let question = make_qt(data.question, data.unit);
6
7    // let hint = make_hint(data.hint)
8    let image = "";
9    if (data.image !== -1)
10        // image = make_img(`${BASE_DImetadataR}/${filters.dataset}/${data.image}`);
11        image = make_img(`${BASE_DIR}/${data.image}`);
12
13    let choices = "";
14    if (data.question_type === "multi_choice")
15        choices = make_choices(data.choices);
16
17    // if data has the answer attr.
18    let answer = "";
19    if ("answer" in data)
20        answer = make_answer(data.answer);
21
22    html = make_box([question, image, choices, answer]);
23
24    return html;
25}
26
27// creates a div with question text in it
28function make_qt(question, unit) {
29    let html = "";
30    if (unit === null)
31        html = `
32                <p><b>Question </b></p>
33                <p class="question-txt">${question}</p>
34        `;
35    else
36        html = `
37                <p><b>Question </b></p>
38                <p class="question-txt">${question} (unit: ${unit})</p>
39        `;
40    return html;
41}
42
43function make_img(path) {
44    if (path === null) return "";
45    let html = `<img src="${path}" alt="number image" class="question-img" />`;
46    return html;
47}
48
49function make_box(contents, cls = "") {
50    if (contents.join("").length === 0) return "";
51    let html = `
52        <div class="${cls}"> 
53            ${contents.join(" ")}
54        </div>
55    `;
56    return html;
57}
58
59function make_choices(choices) {
60    // console.log(choices);
61    let temp = "";
62    let len = 0;
63    for (each of choices) {
64        let html = make_choice(each);
65        temp += html;
66        len += each.length;
67    }
68    let html = "";
69    if (len < 60)
70        html = `<p class='mt-2 mb-1'><b>Choices </b></p><div class="choices">${temp}</div>`;
71    else
72        html = `<p class='mt-2 mb-1'><b>Choices </b></p><div class="choices-vertical">${temp}</div>`;
73    return html;
74}
75function make_choice(choice) {
76    let html = `<p class="choice-txt" style="border: 1px rgba(0, 0, 0, 0.2) solid; padding: 5px;">${choice}</p>`;
77    return html;
78}
79
80function make_answer(answer) {
81    let html = `<p class='mt-2 mb-1' ><b>Answer </b></p><p class="answer-txt">${answer}</p>`;
82    return html;
83}