{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "width": 315,
  "height": 415,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-listPadding"
    },
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "align-items": "flex-start",
      "width": "100%",
      "border": "1px solid #eee",
      "box-shadow": "0 2px 4px rgba(0, 0, 0, 0.1)",
      "padding": "16px",
      "border-radius": "12px",
      "background-color": "#242424",
      "height": "415px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "row",
          "align-items": "flex-start",
          "margin-bottom": "10px",
          "margin-top": "16px"
        },
        "children": [
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "button",
                "txtContent": "[$ID]",
                "style": {
                  "padding": "2px",
                  "background-color": "#242424",
                  "color": "white",
                  "width": "25px",
                  "height": "25px",
                  "border-style": "solid",
                  "border-color": "#0082f0",
                  "border-radius": "50%"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "flex-direction": "column",
              "align-items": "flex-start",
              "margin-left": "8px"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "[$Title]",
                "style": {
                  "color": "white",
                  "font-weight": "bold",
                  "font-size": "18px",
                  "margin-bottom": "8px"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "span",
            "children": [
              {
                "elmType": "button",
                "style": {
                  "height": "auto",
                  "margin-left": "10px",
                  "background-color": "transparent",
                  "border-radius": "4px",
                  "border-color": "#0082f0",
                  "display": "=if([$Choice1] == '', 'none', 'span')",
                  "text-align": "left",
                  "padding": "8px"
                },
                "txtContent": "[$Choice1]",
                "attributes": {
                  "class": "sp-row-button ms-borderColor-blue sp-row-button ms-bgColor-purpleDark--hover ms-fontWeight-semibold ms-fontColor-white"
                },
                "customCardProps": {
                  "openOnEvent": "click",
                  "directionalHint": "rightCenter",
                  "isBeakVisible": true,
                  "beakStyle": {
                    "backgroundColor": "#3c3c3c"
                  },
                  "formatter": {
                    "elmType": "div",
                    "style": {
                      "color": "white",
                      "background-color": "#3c3c3c",
                      "border-color": "=if([$Choice1] == [$Answer], 'green', 'red')",
                      "border-style": "solid",
                      "border-width": "0.8px",
                      "width": "300px",
                      "height": "auto",
                      "padding": "10px"
                    },
                    "txtContent": "=if([$Choice1] == [$Answer], 'Correct: ' + [$Justification], 'Incorrect: '  + '[$Justification]')"
                  }
                }
              }
            ]
          },
          {
            "elmType": "span",
            "children": [
              {
                "elmType": "button",
                "style": {
                  "height": "auto",
                  "margin-left": "10px",
                  "background-color": "transparent",
                  "border-radius": "4px",
                  "border-color": "#0082f0",
                  "display": "=if([$Choice2] == '', 'none', 'span')",
                  "text-align": "left",
                  "padding": "8px"
                },
                "txtContent": "[$Choice2]",
                "attributes": {
                  "class": "sp-row-button ms-borderColor-blue sp-row-button ms-bgColor-purpleDark--hover ms-fontWeight-semibold ms-fontColor-white"
                },
                "customCardProps": {
                  "openOnEvent": "click",
                  "directionalHint": "rightCenter",
                  "isBeakVisible": true,
                  "beakStyle": {
                    "backgroundColor": "#3c3c3c"
                  },
                  "formatter": {
                    "elmType": "div",
                    "style": {
                      "color": "white",
                      "background-color": "#3c3c3c",
                      "border-color": "=if([$Choice2] == [$Answer], 'green', 'red')",
                      "border-style": "solid",
                      "border-width": "0.8px",
                      "width": "300px",
                      "height": "auto",
                      "padding": "10px"
                    },
                    "txtContent": "=if([$Choice2] == [$Answer], 'Correct: ' + [$Justification], 'Incorrect: '  + '[$Justification]')"
                  }
                }
              }
            ]
          },
          {
            "elmType": "span",
            "children": [
              {
                "elmType": "button",
                "style": {
                  "height": "auto",
                  "margin-left": "10px",
                  "background-color": "transparent",
                  "border-radius": "4px",
                  "border-color": "#0082f0",
                  "display": "=if([$Choice3] == '', 'none', 'span')",
                  "text-align": "left",
                  "padding": "8px"
                },
                "txtContent": "[$Choice3]",
                "attributes": {
                  "class": "sp-row-button ms-borderColor-blue sp-row-button ms-bgColor-purpleDark--hover ms-fontWeight-semibold ms-fontColor-white"
                },
                "customCardProps": {
                  "openOnEvent": "click",
                  "directionalHint": "rightCenter",
                  "isBeakVisible": true,
                  "beakStyle": {
                    "backgroundColor": "#3c3c3c"
                  },
                  "formatter": {
                    "elmType": "div",
                    "style": {
                      "color": "white",
                      "background-color": "#3c3c3c",
                      "border-color": "=if([$Choice3] == [$Answer], 'green', 'red')",
                      "border-style": "solid",
                      "border-width": "0.8px",
                      "width": "300px",
                      "height": "auto",
                      "padding": "10px"
                    },
                    "txtContent": "=if([$Choice3] == [$Answer], 'Correct: ' + [$Justification], 'Incorrect: '  + '[$Justification]')"
                  }
                }
              }
            ]
          },
          {
            "elmType": "span",
            "children": [
              {
                "elmType": "button",
                "style": {
                  "height": "auto",
                  "margin-left": "10px",
                  "background-color": "transparent",
                  "border-radius": "4px",
                  "border-color": "#0082f0",
                  "display": "=if([$Choice4] == '', 'none', 'span')",
                  "text-align": "left",
                  "padding": "8px"
                },
                "txtContent": "[$Choice4]",
                "attributes": {
                  "class": "sp-row-button ms-borderColor-blue sp-row-button ms-bgColor-purpleDark--hover ms-fontWeight-semibold ms-fontColor-white"
                },
                "customCardProps": {
                  "openOnEvent": "click",
                  "directionalHint": "rightCenter",
                  "isBeakVisible": true,
                  "beakStyle": {
                    "backgroundColor": "#3c3c3c"
                  },
                  "formatter": {
                    "elmType": "div",
                    "style": {
                      "color": "white",
                      "background-color": "#3c3c3c",
                      "border-color": "=if([$Choice4] == [$Answer], 'green', 'red')",
                      "border-style": "solid",
                      "border-width": "0.8px",
                      "width": "300px",
                      "height": "auto",
                      "padding": "10px"
                    },
                    "txtContent": "=if([$Choice4] == [$Answer], 'Correct: ' + [$Justification], 'Incorrect: '  + '[$Justification]')"
                  }
                }
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "iconName": "Lightbulb"
            },
            "style": {
              "height": "auto",
              "width": "100px",
              "color": "white",
              "padding": "8px",
              "border": "0.5px solid #363636",
              "border-radius": "8px",
              "background-color": "#363636",
              "box-shadow": "0 2px 4px rgba(0, 0, 0, 0.4)",
              "margin": "4px",
              "margin-left": "10px",
              "margin-top": "20px",
              "display": "=if([$MoreInfo] == '', 'none', 'block')"
            },
            "children": [
              {
                "elmType": "a",
                "attributes": {
                  "href": "[$MoreInfo]",
                  "target": "_blank"
                },
                "txtContent": "More Info",
                "style": {
                  "width": "auto",
                  "font-size": "14px",
                  "color": "white",
                  "text-decoration": "none",
                  "text-align": "start",
                  "padding-left": "8px"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}