target_card.txt

target card = 
// unsat, below, near, hit
VAR _Q1_result = "unsat"

VAR _Q2_result = "below"

VAR _Q3_result = "near"

VAR _Q4_result = "hit"

VAR _header = "data:image/svg+xml;utf8,<svg xmlns=""http://www.w3.org/2000/svg"" width=""400"" height=""400"" viewBox=""75 75 250 250"" fill=""none"">"

var _footer = "</svg>"

VAR _target = "<circle cx=""200"" cy=""200"" r=""80"" style=""stroke:black;fill:white;""/>
    <circle cx=""200"" cy=""200"" r=""60"" style=""stroke:black;fill:black;""/>
    <circle cx=""200"" cy=""200"" r=""40"" style=""stroke:black;fill:white;""/>
    <circle cx=""200"" cy=""200"" r=""20"" style=""stroke:black;fill:red;""/>
    <line x1=""200"" y1=""100"" x2=""200"" y2=""300"" style=""stroke:black; stroke-dasharray:3,3;"" />
    <line x1=""100"" y1=""200"" x2=""300"" y2=""200"" style=""stroke:black; stroke-dasharray:3,3;"" />
    <text x=""250"" y=""110"" fill=""black"" font-weight=""bold"">Q1</text>
    <text x=""250"" y=""300"" fill=""black"" font-weight=""bold"">Q2</text>
    <text x=""130"" y=""300"" fill=""black"" font-weight=""bold"">Q3</text>
    <text x=""130"" y=""110"" fill=""black"" font-weight=""bold"">Q4</text>"

VAR _Q1_actual = 
    SWITCH(
        _Q1_result, 
        "unsat", 
            "<circle cx=""250"" cy=""150"" r=""5"" style=""stroke:black;fill:red;""/>", 
        "below", 
            "<circle cx=""235"" cy=""165"" r=""5"" style=""stroke:black;fill:red;""/>",
        "near", 
            "<circle cx=""220"" cy=""180"" r=""5"" style=""stroke:black;fill:red;""/>", 
        "<circle cx=""210"" cy=""190"" r=""5"" style=""stroke:black;fill:yellow;""/>"
    )

VAR _Q2_actual = 
    SWITCH(
        _Q2_result, 
        "unsat", 
            "<circle cx=""250"" cy=""250"" r=""5"" style=""stroke:black;fill:red;""/>", 
        "below", 
            "<circle cx=""235"" cy=""235"" r=""5"" style=""stroke:black;fill:red;""/>",
        "near", 
            "<circle cx=""220"" cy=""220"" r=""5"" style=""stroke:black;fill:red;""/>", 
        "<circle cx=""210"" cy=""210"" r=""5"" style=""stroke:black;fill:yellow;""/>"
    )

VAR _Q3_actual = 
    SWITCH(
        _Q3_result, 
        "unsat", 
            "<circle cx=""150"" cy=""250"" r=""5"" style=""stroke:black;fill:red;""/>", 
        "below", 
            "<circle cx=""165"" cy=""235"" r=""5"" style=""stroke:black;fill:red;""/>",
        "near", 
            "<circle cx=""180"" cy=""220"" r=""5"" style=""stroke:black;fill:red;""/>", 
        "<circle cx=""190"" cy=""210"" r=""5"" style=""stroke:black;fill:yellow;""/>"
    )

VAR _Q4_actual = 
    SWITCH(
        _Q4_result, 
        "unsat", 
            "<circle cx=""150"" cy=""150"" r=""5"" style=""stroke:black;fill:red;""/>", 
        "below", 
            "<circle cx=""165"" cy=""165"" r=""5"" style=""stroke:black;fill:red;""/>",
        "near", 
            "<circle cx=""180"" cy=""180"" r=""5"" style=""stroke:black;fill:red;""/>", 
        "<circle cx=""190"" cy=""190"" r=""5"" style=""stroke:black;fill:yellow;""/>"
    )

VAR _output = _header & _target & _Q1_actual & _Q2_actual & _Q3_actual & _Q4_actual & _footer

RETURN _output