Visual answer type hints #152

Vages · 2019-10-08T16:43:21Z

I may be a bit dim, but I often miss what kind of answer is expected if I don't concentrate on reading the headline. I guess I'm not alone. Some visual indicator of the type of answer would be great.

An icon in front of the expected type of answer is an idea which I'll deliver a PR on shortly.

axelboc · 2019-11-03T10:30:37Z

That's a cool idea!

One concern would be about emojis not being available on all devices. Not sure that's still the case, these days, though... They also don't look the same everywhere. Looking at your PR, I feel like we could just as well use inline SVG icons in the templates. It would give us more freedom and guarantee the same rendering on all devices.

There are plenty of open source SVG icon/emoji libraries out there. I've just come across https://openmoji.org for instance, which has a few interesting emojis, like the authority building, or the world map. They may be a bit too detailed for the size at which they will be displayed in the deck, though.

axelboc · 2019-11-03T10:35:43Z

I've added the votes wanted label to the issue. How does everyone else feel about the idea of having emojis/icons in the templates (in whichever format)?

aplaice · 2019-11-03T16:27:02Z

I'd vote for some small (visually and ideally memory-wise) SVG icons!

I feel that emojis are a bit too inconsistent between platforms (like @axelboc pointed out).

inline SVG icons

Just to clarify, do you mean having the SVG "code" entirely included (inline) in the HTML/templates, (as opposed to just using the standard <img src="foobar.svg" /> tag, with the actual SVGs bundled as part of the media in the deck)? If yes, I'm not sure if that'd be optimal:

~~Testing ~ a year ago inlined SVGs were somehow mangled by Ankidroid. (This might have changed).~~ This doesn't seem to be a problem anymore (see below).
It'd lead to messier diffs for the templates.
It'd make editing/customising the templates slightly messier for end-users.

(PS Thanks @Vages for the idea!)

axelboc · 2019-11-03T16:59:31Z

Arf damn, I was hoping inline SVGs were supported. SVG files bundled as media in the deck, sounds good, then. 👍

ohare93 · 2019-11-03T17:07:38Z

I've been using @Vages's PR for the last week or so. At the start I did not like the Emojis in the cards, I thought they looked bad; now I simply do not notice them at all 🙁 Also the lack of an icon for the X -> Country cards bothers me aesthetically 🙂 💢

I don't think they help me personally know which card type it is, though as I said in my comment in the PR I did not have this problem in the first place 😅 I think the new cloze templates are sufficient. If necessary perhaps each bottom title Capital/Map/Flag could have it's own colour/font/etc to make it stand out 🤔 just a thought

aplaice · 2019-11-03T22:17:03Z

Correction:

(This might have changed).

Checking now with a random SVG from the internet, I've not noticed any problems with an SVG inlined within the template, on any of Desktop, Android or (old-ish) iOS.

I'm still not sure whether the advantages of inline SVG (mainly control over styling of sub-elements of the SVG) are worth it, though.

ohare93 · 2020-01-26T11:04:26Z

Ahh, should have posted this here first! Just going to copy paste:

As I've been doing more of the extended deck I find I need something that accomplishes the goal of this PR more and more. It is sometimes very difficult to tell which question is being asked, if you are to answer Capital, Flag, or Location. Though I still maintain that just an emoji did not solve the issue (for me, at least). So I made the following updates to my own extended templates:

Country -> Flag

Country -> Map

The big obvious shapes for the flag or the globe really help me get into the right headspace quickly, I am finding at least. The circle for the globe then turning into a square shaped map is asthetically displeasing, but I could not think of a better blank symbol for the Country -> Map, and was unwilling to add in an unreferenced (in a card) media file just to make it look nicer.

What do you think @Vages, @axelboc? 😁

Originally posted by @ohare93 in #153 (comment)

aplaice · 2020-01-26T14:06:45Z

This is a really cool idea!

and was unwilling to add in an unreferenced (in a card) media file just to make it look nicer.

You're right that having an unreferenced media file is indeed an issue, as it would make importing it from the ankiweb Shared Deck page much harder. (There obviously are workarounds — having a "dummy" note with the media file or having the unreferenced media file referenced in one of the existing notes (but wrapped in a <div style="display: none">) — however, none of them are pretty...)

The circle for the globe then turning into a square shaped map is asthetically displeasing,

Yeah, that might be slightly annoying.

Perhaps using something like this:

might avoid this unaesthetic transition (and it might be sufficiently simple to include inline, without bloating the template excessively).

(If allowing an external media file were OK, I'd suggest something like this:

)

(I'm not sure about the external rectangular border, in either case, since it isn't present in any of the actual maps, and besides it might be easy to confuse with the empty rectangle for the flag, which would completely beat the point of the exercise...)

ohare93 · 2020-02-04T15:28:24Z

Sorry for the late reply @aplaice, thanks for the feedback.

(I'm not sure about the external rectangular border, in either case, since it isn't present in any of the actual maps, and besides it might be easy to confuse with the empty rectangle for the flag, which would completely beat the point of the exercise...)

Yea, pretty much! 😅 Also the world map does not appear on all map fields, such as most Seas (such as Labrador) or certain autonomous cities (such as Melillia), so it would not be a universal standard anyways. I fear there is no answer which will please all asthetics! 😭 I am happy enough with my template change for the time being, but will leave this open for a while for someone else to suggest an alternative 👍

aplaice · 2020-02-04T17:05:01Z

Also the world map does not appear on [...] most Seas (such as Labrador)

It does now! :D

Your point about Ceuta and Melilla (and the Pacific Island regions, the Balkans and Saint Helena — though I'm planning to suggest changes to the latter two) still stands, though.

ukanuk · 2020-02-16T03:35:41Z

I like the proposal from @ohare93, though I've modified it by replacing the circle's border-radius: 50%; with border-radius: 35% / 50%; to more closely match the inset world map. I also modified it to automatically scale down on smaller screens (images have max-width: 100%, which takes some extra work to replicate with div's), and also invert colors for Night Mode/Dark Mode. Here are the full changes:

Click to expand code

New CSS

.shape-wrapper {
	margin: 0.75em auto 0;
	max-width: 475px;
}
.shape-map, .shape-flag {     /* Common properties for flag and map shapes */
	font-size: 3em;
	border: 1px solid black;
	box-shadow: 0 1px 4px 1px rgba(0, 0, 0, .2);
	line-height: 0;               /* Vertically center text */
	height: 0;                      /* Maintain 16:9 aspect ratio https://css-tricks.com/aspect-ratio-boxes */
	padding: 28.125% 0;   /* Maintain 16:9 aspect ratio https://css-tricks.com/aspect-ratio-boxes */
}
.shape-map {                       /* Extra properties for map shape */
	border-radius: 35% / 50%;
}
.night_mode .shape-map, .night_mode .shape-flag { border-color: white; }    /* Invert Night Mode colors */

New Flag HTML

  <div class="shape-wrapper">
    <div class="shape-flag">?</div>
  </div>

New Map HTML

  <div class="shape-wrapper">
    <div class="shape-map">?</div>
  </div>

ukanuk · 2020-02-16T03:38:28Z

@ohare93 If necessary perhaps each bottom title Capital/Map/Flag could have it's own colour/font/etc to make it stand out 🤔 just a thought

I'd recommend changes to these colors regardless, as they're currently broken for night mode. If the group moves to non-grey colors entirely, then that fixes it night mode. But if the headings/extended notes stay grey, then night mode is improved by changing the CSS on .type and .info classes from color: #333; to filter: contrast(70%);. It appears the same in regular day mode, but dramatically improves night mode appearance.

AnkiDroid "Dark" Night theme with color: #333;

AnkiDroid "Dark" Night theme with filter: contrast(70%);

aplaice · 2020-02-16T12:35:45Z

they're currently broken for night mode.

Please report this as a (separate) issue, as that definitely shouldn't be happening.

FWIW with AnkiDroid 2.9.3, with anki-ultimate-geography from git, I get a readable contrast, both with the "dark" and "black" themes:

(I also didn't encounter the problem you have, with any combination of AnkiDroid and anki-ultimate-geography, in the past.)

I don't know whose "fault" it is (AnkiDroid's, anki-ultimate-geography's or Android's), but it might be worth investigating.

ukanuk · 2020-02-17T04:55:17Z

@aplaice I retract my claim about night mode.

It's broken on desktop with the latest 3.2 Release, but PR #173 fixes it for whenever the next release comes. Concerning AnkiDroid, that's my own dumb fault because of other styling I added while thinking about Issue #81. When testing styling from the 3.2 release and PR #173, my AnkiDroid dark mode works normally.

josealberto4444 · 2020-03-21T20:01:30Z

For me, this was an issue at the beginning, now I mostly read what the card is asking. However, sometimes I think about the capital no matter what asked.

So my vote would go for having a visual hint, yes. I love both @ohare93's suggestion and @ukanuk's suggestion. I think @aplaice's suggestion is maybe too subtle (flag and map would share the rectangle). Finally, I also think emojis are not enough, I would keep skipping them.

axelboc · 2020-04-05T12:29:44Z

I had a bit of a play with some SVG graphics from OpenMoji. I adapted this flag emoji and this map emoji. Just throwing another idea in the mix! 😄

Front Country - Flag template

{{#Flag}}
  <div class="value value--top">{{Country}}</div>
  {{#Country info}}<div class="info">{{Country info}}</div>{{/Country info}}

  <hr>

  <div class="type">Flag</div>
  <div class="value">
    <svg xmlns="http://www.w3.org/2000/svg" height="250" viewBox="0 0 32.72 33.19" class="placeholder-flag">
      <path fill="none" stroke="#777" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".5" d="M1.56 2.97c2.88-1.8 8.42-4.23 14.41-1.49 3.7 1.7 5.64 4.7 15.04 4.12A1.4 1.4 0 0132.47 7v15.13c0 .63-.42 1.08-.96 1.36-1.95 1-7.27.93-15.54-3-3.36-1.61-8.57-2.57-14.46 1.44"/>
      <line x1=".25" x2=".25" y1=".25" y2="32.94" fill="none" stroke="#777" stroke-linecap="round" stroke-miterlimit="10" stroke-width=".5"/>
    </svg>
  </div>
{{/Flag}}

Front Country - Map template

{{#Map}}
  <div class="value value--top">{{Country}}</div>

  <hr>

  <div class="type">Location</div>
  <div class="value">
    <svg xmlns="http://www.w3.org/2000/svg" height="285" viewBox="0 0 62.5 38.5" class="placeholder-map">
      <path fill="#f5f5f5" d="M23.75 13.75c-.04.58-1.67 2.59-2.08 2.88-.87.6-1.21.32-1.97.92-.48.37-1.08.78-1.8.92-.42.08-.24-.3-1.15.28-.5.33-.06.68 0 1 .08.43.13.17 1 1 .45.43.5.82 1 1 .32.11.55.05 1 0 .95-.1.53.83 1 1 1.09.4 1 1.83 2 2 .4.07.55-.14 1 0 .41.13.88.5 1 1 .15.66-.37 1.27-1 2-.5.6-.6.5-1 1-.53.67-.39.86-1 2-.62 1.15-.96 1.31-1 2-.02.29 0 .97 0 1 .02.7.06.79 0 1-.13.5-1.14.93-1.52.88-.75-.12-.74-2.7-.77-3.1-.07-.82.26-1.27.29-1.78.1-1.76.4-2.3 0-3-.25-.45-.39-.25-1-1a4.04 4.04 0 01-1-2c-.08-.58.09-.58 0-1-.17-.78-.8-1.03-2-2-.74-.6-1.39-1.13-2-2-.32-.45-.77-1.09-1-2-.3-1.2.15-1.4 0-3a7.06 7.06 0 00-1-3c-.35-.56-.6-.95-1-1-.77-.1-1.19 1.12-2 1-.48-.07-.86-.58-1-1a1.5 1.5 0 010-1c.1-.25.4-.5 1-1 .61-.5.92-.77 1-1 .15-.44-.12-.6 0-1 .2-.7 1.26-1.24 2-1 .42.14.33.4 1 1a4.2 4.2 0 002 1c.5.09.74.13 1 0 .65-.32.34-1.18 1-2 .6-.75 1.6-.93 2-1 .99-.18 1.13.2 2 0 .94-.22.91-.68 2-1 .48-.14 1.31-.39 2 0 .62.35.53.89 1 1 .65.16.97-.85 2-1 .79-.11 1.73.32 2 1 .14.34.07.65 0 1-.22 1.07-.8 1.13-1 2-.22.95.25 1.17 0 2-.17.54-.5.38-1.03.81-.24.2-.3.52-.97 1.19-.33.33-.68.65-1 1-.73.79-.85.85-1 1"/>
      <path fill="#f5f5f5" d="M29.75 18.75c-.23-.3-1.23-1.83-1-2 .28-.21.78.2 1 0 .18-.17-.12-.5 0-1 .11-.48.56-.88 1-1 .53-.15.9.14 1 0 .2-.28-1.24-1.26-1-2 .15-.46.8-.4 1-1 .13-.4-.13-.54 0-1 .13-.46.54-.84 1-1 .13-.04.57-.2 1 0 .54.24.46.76 1 1 .3.14.7.14 1 0 .54-.24.48-.77 1-1 .34-.15.51.01 1 0a3.06 3.06 0 002-1c.5-.57.25-.8 1-2 .4-.64.66-.88 1-1 .1-.03.56-.2 1 0 .54.24.48.76 1 1 .27.12.44.06 1 0h2c1.9 0 1.82.04 2 0 1.01-.25 1-.75 2-1 .7-.17.68.08 2 0 1.2-.07 1.77-.3 2 0 .09.12.02.18 0 1 0 .33.27.65.28 1.04 0 .9.04.84 0 .96-.22.53-.37.66-.61 1.19-.1.2-.12.27-.09 1.02.06 1.1.36.85.42 1.79.05.74.13.89 0 1-.34.3-2.17-.26-2.58-1.13-.43-.9-.13-1.67-.42-1.87-.4-.28-2.23 1.13-2.5 2.02-.05.17-.28.45.58 1.23.87.79 1.25 1.08 1.33 1.16.48.43 1 1.02.59 1.59-.56.76-1.62.32-2 1-.34.61.39 1.18 0 2-.11.23-.4.49-1 1-.66.57-.9.65-1 1-.13.47.18.78 0 1-.24.28-.97.01-1 0-1.29-.48-1.34-1.97-2-2-.79-.04-1.22 2.08-2 2-.17-.02-.45-.34-1-1-.53-.63-.64-.86-1-1a1.5 1.5 0 00-1 0c-.18.06-.5.22-1 1-.7 1.1-.44 1.4-1 2-.48.51-.86.5-1 1-.03.1-.02.4 0 1 .02.61.03.92 0 1-.2.53-.76.47-1 1-.16.36.03.55 0 1-.06 1.03-1.19 2.15-2 2-.32-.06-.55-.37-1-1a5 5 0 01-1-2c-.18-.91.15-1.01 0-2-.08-.5-.25-1.63-1-2-.72-.35-1.25.35-2 0-.7-.32-1.02-1.29-1-2 .02-.76.44-1.3 1-2 .44-.55.65-.83 1-1"/>
      <path fill="#f5f5f5" d="M49.75 27.75c-1.18.58-1.74.45-2 1-.2.42-.04.89 0 1 .24.7.93.97 1 1 .86.32 1.34-.35 2 0 .5.27.43.77 1 1 .32.13.6.08 1 0 .7-.13 1.58-.3 2-1 .3-.5.2-1.01 0-2-.15-.77-.35-1.78-1-2-.13-.04-.14-.01-1 0h-1c-.77.05-.9.46-2 1z"/>
      <rect width="62" height="38" x=".25" y=".25" fill="none" stroke="#777" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".2"/>
      <path fill="none" stroke="#777" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".2" d="M23.75 13.75c-.04.58-1.67 2.59-2.08 2.88-.87.6-1.21.32-1.97.92-.48.37-1.08.78-1.8.92-.42.08-.24-.3-1.15.28-.5.33-.06.68 0 1 .08.43.13.17 1 1 .45.43.5.82 1 1 .32.11.55.05 1 0 .95-.1.53.83 1 1 1.09.4 1 1.83 2 2 .4.07.55-.14 1 0 .41.13.88.5 1 1 .15.66-.37 1.27-1 2-.5.6-.6.5-1 1-.53.67-.39.86-1 2-.62 1.15-.96 1.31-1 2-.02.29 0 .97 0 1 .02.7.06.79 0 1-.13.5-1.14.93-1.52.88-.75-.12-.74-2.7-.77-3.1-.07-.82.26-1.27.29-1.78.1-1.76.4-2.3 0-3-.25-.45-.39-.25-1-1a4.04 4.04 0 01-1-2c-.08-.58.09-.58 0-1-.17-.78-.8-1.03-2-2-.74-.6-1.39-1.13-2-2-.32-.45-.77-1.09-1-2-.3-1.2.15-1.4 0-3a7.06 7.06 0 00-1-3c-.35-.56-.6-.95-1-1-.77-.1-1.19 1.12-2 1-.48-.07-.86-.58-1-1a1.5 1.5 0 010-1c.1-.25.4-.5 1-1 .61-.5.92-.77 1-1 .15-.44-.12-.6 0-1 .2-.7 1.26-1.24 2-1 .42.14.33.4 1 1a4.2 4.2 0 002 1c.5.09.74.13 1 0 .65-.32.34-1.18 1-2 .6-.75 1.6-.93 2-1 .99-.18 1.13.2 2 0 .94-.22.91-.68 2-1 .48-.14 1.31-.39 2 0 .62.35.53.89 1 1 .65.16.97-.85 2-1 .79-.11 1.73.32 2 1 .14.34.07.65 0 1-.22 1.07-.8 1.13-1 2-.22.95.25 1.17 0 2-.17.54-.5.38-1.03.81-.24.2-.3.52-.97 1.19-.33.33-.68.65-1 1-.73.79-.85.85-1 1"/>
      <path fill="none" stroke="#777" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".2" d="M29.75 18.75c-.23-.3-1.23-1.83-1-2 .28-.21.78.2 1 0 .18-.17-.12-.5 0-1 .11-.48.56-.88 1-1 .53-.15.9.14 1 0 .2-.28-1.24-1.26-1-2 .15-.46.8-.4 1-1 .13-.4-.13-.54 0-1 .13-.46.54-.84 1-1 .13-.04.57-.2 1 0 .54.24.46.76 1 1 .3.14.7.14 1 0 .54-.24.48-.77 1-1 .34-.15.51.01 1 0a3.06 3.06 0 002-1c.5-.57.25-.8 1-2 .4-.64.66-.88 1-1 .1-.03.56-.2 1 0 .54.24.48.76 1 1 .27.12.44.06 1 0h2c1.9 0 1.82.04 2 0 1.01-.25 1-.75 2-1 .7-.17.68.08 2 0 1.2-.07 1.77-.3 2 0 .09.12.02.18 0 1 0 .33.27.65.28 1.04 0 .9.04.84 0 .96-.22.53-.37.66-.61 1.19-.1.2-.12.27-.09 1.02.06 1.1.36.85.42 1.79.05.74.13.89 0 1-.34.3-2.17-.26-2.58-1.13-.43-.9-.13-1.67-.42-1.87-.4-.28-2.23 1.13-2.5 2.02-.05.17-.28.45.58 1.23.87.79 1.25 1.08 1.33 1.16.48.43 1 1.02.59 1.59-.56.76-1.62.32-2 1-.34.61.39 1.18 0 2-.11.23-.4.49-1 1-.66.57-.9.65-1 1-.13.47.18.78 0 1-.24.28-.97.01-1 0-1.29-.48-1.34-1.97-2-2-.79-.04-1.22 2.08-2 2-.17-.02-.45-.34-1-1-.53-.63-.64-.86-1-1a1.5 1.5 0 00-1 0c-.18.06-.5.22-1 1-.7 1.1-.44 1.4-1 2-.48.51-.86.5-1 1-.03.1-.02.4 0 1 .02.61.03.92 0 1-.2.53-.76.47-1 1-.16.36.03.55 0 1-.06 1.03-1.19 2.15-2 2-.32-.06-.55-.37-1-1a5 5 0 01-1-2c-.18-.91.15-1.01 0-2-.08-.5-.25-1.63-1-2-.72-.35-1.25.35-2 0-.7-.32-1.02-1.29-1-2 .02-.76.44-1.3 1-2 .44-.55.65-.83 1-1"/>
      <path fill="none" stroke="#777" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".2" d="M49.75 27.75c-1.18.58-1.74.45-2 1-.2.42-.04.89 0 1 .24.7.93.97 1 1 .86.32 1.34-.35 2 0 .5.27.43.77 1 1 .32.13.6.08 1 0 .7-.13 1.58-.3 2-1 .3-.5.2-1.01 0-2-.15-.77-.35-1.78-1-2-.13-.04-.14-.01-1 0h-1c-.77.05-.9.46-2 1z"/>
    </svg>
  </div>
{{/Map}}

Additional CSS

.placeholder-map {
  margin-top: 0.25em;
}

.placeholder-flag {
  margin-top: 0.75em;
}

ukanuk · 2020-04-06T09:58:47Z

I really like the inline svg, I think it's the best method so far. Moreover it scales simply by adding CSS max-width: 100%;, and CSS can also change border color for night mode.

I'm not as fond of the modified OpenMoji designs, as I think it makes an ugly/intimidating wall of text in the card template, especially for people who don't already know to look for <svg>...</svg>. With the primary goal being an intuitive visual indicator of card type, a rectangle for the flag and a flattened-oval for the map seem fine to me.

Regardless, I think an inline SVG is the best method so far, and any of the proposed shapes will work. With my newfound Github powers, I would enjoy making a pull request for this once there's sufficient consensus. I'd just like this feature merged sooner rather than later if that's helpful 😄

Front Country - Flag template

{{#Flag}}
  <div class="value value--top">{{Country}}</div>
  {{#Country info}}<div class="info">{{Country info}}</div>{{/Country info}}

  <hr>

  <div class="type">Flag</div>
  <div class="image">
    <svg xmlns="http://www.w3.org/2000/svg" width="407" height="229" viewBox="0 0 407 229" class="image__placeholder"><path d="m0.5 0.5 l406 0l0 228l-406 0z"/></svg>
  </div>
{{/Flag}}

Front Country - Map template

{{#Map}}
  <div class="value value--top">{{Country}}</div>

  <hr>

  <div class="type">Location</div>
  <div class="image">
    <svg xmlns="http://www.w3.org/2000/svg" width="407" height="250" viewBox="0 0 407 250" class="image__placeholder"><path d="m283 0.5c167 56 163 195-0.29 249-72-0.084-72-0.51-158 0-164-54-167-194 0.29-249l158 0.07"/></svg>
  </div>
{{/Map}}

Additional CSS

.image__placeholder {
  max-width: 100%;
  height: auto; /* Required for webkit */
}

.image__placeholder path {
  fill: none;
  stroke: #333;
  stroke-width: 1;
}

.night_mode .image__placeholder path {
  stroke: #ccc;
}

aplaice · 2020-04-06T14:08:31Z

I've just been testing out the designs. To possibly save somebody a tiny amount of time, a filtered search with deck:"Ultimate Geography*" -is:due (card:3 or card:5 ) and a random selection order will give a convenient testing ground for how the cards would look when in use. (Don't forget to uncheck the "Reschedule cards based on my answers in this deck" box!)

I'm surprised that I really like the flag emoji that @axelboc suggested (I thought that I'd find it too "cutesy")!

The map emoji is OK (I don't dislike it), but I'm not too enthusiastic about it, either. Also, I agree with @ukanuk's point about a long SVG in the template being potentially annoying for anybody who wants to edit the templates for their own use (the flag emoji and @ukanuk suggestions are both short enough IMO).

@ukanuk suggestions are clear, simple and consistent with each other. (I appreciate the thought given to adapting for night mode!).

My only remaining worry is about the rectangle for the flag being potentially interpretable (on a subconscious level — but that's what this whole issue is about) as referring to the map (unless and until the association between the map and the flattened oval is fully "absorbed"). However, I'm not sure how warranted this worry is.

Hence, I'd vote either for @ukanuk's combination (my first choice), or perhaps @axelboc's emoji flag together with @ukanuk's flattened oval (possibly with some editing for a consistent look).

axelboc · 2020-04-06T21:08:16Z

What about giving @ukanuk's flag suggestion a bit of a wave? I feel like a simple rectangle is not sufficiently "iconic" -- not sure if that's the word I'm looking for...

horwitz · 2020-04-06T23:55:32Z

What about giving @ukanuk's flag suggestion a bit of a wave? I feel like a simple rectangle is not sufficiently "iconic" -- not sure if that's the word I'm looking for...

"evocative"? "suggestive"?

ukanuk · 2020-04-07T03:06:43Z

I like that idea, how about this?

Front Country - Flag template (bounding box ratio = 3:5)

{{#Flag}}
  <div class="value value--top">{{Country}}</div>
  {{#Country info}}<div class="info">{{Country info}}</div>{{/Country info}}

  <hr>

  <div class="type">Flag</div>
  <div class="image">
    <svg class="image__placeholder" xmlns="http://www.w3.org/2000/svg" width="417" height="250" viewBox="0 0 417 250"><path d="m2 26s45-24 129-24c86 0 146 25 210 25 64 0 74-10 74-10v218s-25 13-83 13-146-25-206-25c-60 0-123 19-123 19z"/></svg>
  </div>
{{/Flag}}

Apparently most flags have a 2:3 ratio, but I think the 3:5 ratio above looks better overall. Here's code for the 2:3 ratio if you want to compare. I think both 2:3 and 3:5 look good on a computer when everything has height=250px. But on mobile when the max-width: 100% scaling starts to happen, that's when I think the thinner aspect ratio looks better. (Note I couldn't round to whole numbers for this inline SVG otherwise the left flag edge gets slanted. But I'm guessing it will work with whole numbers with a bit of fiddling, if others prefer this aspect ratio)

Front Country - Flag template (bounding box ratio = 2:3)

{{#Flag}}
  <div class="value value--top">{{Country}}</div>
  {{#Country info}}<div class="info">{{Country info}}</div>{{/Country info}}

  <hr>

  <div class="type">Flag</div>
  <div class="image">
    <svg class="image__placeholder" xmlns="http://www.w3.org/2000/svg" width="375" height="250" viewBox="0 0 375 250"><path d="m2 25.71s40.14-23.71 116.1-23.71c77.02 0 131.3 24.7 188.8 24.7 57.49 0 66.17-9.88 66.17-9.88v218.3s-22.78 12.84-74.85 12.84c-52.07 0-131.3-24.7-185.5-24.7-54.24 0-110.6 18.77-110.6 18.77z"/></svg>
  </div>
{{/Flag}}

axelboc · 2020-04-07T06:42:35Z

Excellent! I reckon it's time for a PR, @ukanuk. We can iron out the final details in there.

Vages mentioned this issue Oct 8, 2019

Add emoji to templates as an answer type hint #153

Closed

Vages changed the title ~~Visual indicators of what type of answer is expected~~ Visual answer type hints Oct 8, 2019

axelboc added structure Templates, tags, generated decks, etc. votes wanted labels Nov 3, 2019

axelboc removed the votes wanted label Apr 7, 2020

axelboc added this to the v3.3 milestone Apr 7, 2020

ukanuk added a commit to ukanuk/anki-ultimate-geography that referenced this issue Apr 7, 2020

Update style.css to fix anki-geo#152

fb7f4e8

ukanuk mentioned this issue Apr 7, 2020

"Flag" and "Map" placeholder hints #261

Merged

axelboc closed this as completed in #261 Apr 8, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Visual answer type hints #152

Visual answer type hints #152

Vages commented Oct 8, 2019 •

edited

Loading

axelboc commented Nov 3, 2019

axelboc commented Nov 3, 2019

aplaice commented Nov 3, 2019 •

edited

Loading

axelboc commented Nov 3, 2019

ohare93 commented Nov 3, 2019

aplaice commented Nov 3, 2019

ohare93 commented Jan 26, 2020

aplaice commented Jan 26, 2020

ohare93 commented Feb 4, 2020

aplaice commented Feb 4, 2020

ukanuk commented Feb 16, 2020 •

edited

Loading

ukanuk commented Feb 16, 2020

aplaice commented Feb 16, 2020

ukanuk commented Feb 17, 2020

josealberto4444 commented Mar 21, 2020 •

edited

Loading

axelboc commented Apr 5, 2020 •

edited

Loading

ukanuk commented Apr 6, 2020 •

edited

Loading

aplaice commented Apr 6, 2020

axelboc commented Apr 6, 2020

horwitz commented Apr 6, 2020

ukanuk commented Apr 7, 2020 •

edited

Loading

axelboc commented Apr 7, 2020

Visual answer type hints #152

Visual answer type hints #152

Comments

Vages commented Oct 8, 2019 • edited Loading

axelboc commented Nov 3, 2019

axelboc commented Nov 3, 2019

aplaice commented Nov 3, 2019 • edited Loading

axelboc commented Nov 3, 2019

ohare93 commented Nov 3, 2019

aplaice commented Nov 3, 2019

ohare93 commented Jan 26, 2020

Country -> Flag

Country -> Map

aplaice commented Jan 26, 2020

ohare93 commented Feb 4, 2020

aplaice commented Feb 4, 2020

ukanuk commented Feb 16, 2020 • edited Loading

ukanuk commented Feb 16, 2020

aplaice commented Feb 16, 2020

ukanuk commented Feb 17, 2020

josealberto4444 commented Mar 21, 2020 • edited Loading

axelboc commented Apr 5, 2020 • edited Loading

ukanuk commented Apr 6, 2020 • edited Loading

aplaice commented Apr 6, 2020

axelboc commented Apr 6, 2020

horwitz commented Apr 6, 2020

ukanuk commented Apr 7, 2020 • edited Loading

axelboc commented Apr 7, 2020

Vages commented Oct 8, 2019 •

edited

Loading

aplaice commented Nov 3, 2019 •

edited

Loading

ukanuk commented Feb 16, 2020 •

edited

Loading

josealberto4444 commented Mar 21, 2020 •

edited

Loading

axelboc commented Apr 5, 2020 •

edited

Loading

ukanuk commented Apr 6, 2020 •

edited

Loading

ukanuk commented Apr 7, 2020 •

edited

Loading