Arranging multiple schemas for a single task

[maria-antoniak]

Hi, thanks so much for your work on Potato! I'm wondering if there's an easy way to arrange multiple schemas used for a single task. For example, if I include more than a couple text boxes, they start to spill over the edge of the screen and squeeze other questions. Is there a way to force one or more of the schemas onto a new line?

[davidjurgens]

Yes! We've done something similar internally and that usually requires hacking at the HTML layout for the task to arrange the boxes and using the custom template instead of the default. Could you share a version of what you are using and some crude mock-up of what you want it to look like? We can see if there's something we have that can be shared (or just adapt it to what you want)

[Jiaxin-Pei]

You could edit the custom HTML layout. For example, in the politeness rating template, the custom HTML layout is templates/layout.html. In the .yaml file, it uses "html_layout": "templates/layout.html" to point to this custom template.

In the custom template, simply edit the style of the annotation_scheme div will work. For example,

<div class="annotation_schema" style="display:block; width: 600px;">
              {{annotation_schematic}}
 </div>

This will change the width of text boxes.

You could also put the boxes into grids:

<div class="annotation_schema" style="display: grid;grid-template-columns: repeat(1, 1fr);gap: 80px;grid-auto-rows: 200px;">
              {{annotation_schematic}}
</div>

[maria-antoniak]

Thank you! The grid option is almost perfect, but when I have multiple text boxes in a row, there's no gap between them and the instructions of the next text box cover the last row of text in the previous box. It seems like the gap only appears between different kinds of schemas, not schemas of the same kind?

[Jiaxin-Pei]

Interesting! Would you be willing to share the current scheme section of your .yaml file? I can try to take a look and see what's the issue.

[maria-antoniak]

Yes, thank you for taking a look!

"annotation_schemes": [
  {
      "annotation_type": "radio",
      "name": "story_decision", 
      "description": "Does this text contain a story?",
      "labels": [
          "YES", "NO"
      ],
      "sequential_key_binding": True,                        
  }, 
  {
    "annotation_type": "text",
    "name": "explanation",
    "description": "Explain your answer by writing a short list of reasons.",
        "textarea": {
          "on": True,
          "rows": 10,
          "cols": 50
    }
  },
  {
    "annotation_type": "text",
    "name": "story_span",
    "description": "If you selected YES, copy and paste the part of the text that IS A STORY into this box.",
        "textarea": {
          "on": True,
          "rows": 10,
          "cols": 50
    }
  },  
  {
    "annotation_type": "text",
    "name": "not_story_but_a",
    "description": "If you selected NO, what is this text? Finish the sentence: This is not a story, it's a __________.",
        "textarea": {
          "on": True,
          "rows": 1,
          "cols": 30
    }
  }          
],

[Jiaxin-Pei]

Hi @maria-antoniak,

Looks like simply changing grid-auto-row: 200px to grid-auto-rows: auto will work. Here is my revised code:

          <div class="annotation_schema" style="display: grid;grid-template-columns: repeat(1, 1fr);gap: 20px;grid-auto-rows: auto; max-width:400px;">
              {{annotation_schematic}}
          </div>

Let me know if you need any further help!

[maria-antoniak]

Thank you so much! That's perfect.