Adding SVG images to cards

Site Feedback
#21

Thanks for thinking about this, it might be a great feature :v:

Does your solution involve to change the SVG or where do the attributes go? The good solution would be to define it outside of the SVG based on card fields.

1 Like
#22

Perfect. If you care about validity though, consider data- attributes: https://w3c.github.io/html/single-page.html#embedding-custom-non-visible-data-with-the-data-attributes

@acm2010: The solution outlined by @Neicudi would require putting those tags inside the SVG itself. But you’d have to manually paste that into your cards anyway.

#23

In that case wouldn’t you need a different SVG for each question? Maybe at least the correct/wrong could be outside somehow :slight_smile:

I don’t really have a clear idea how to implement this, but shouldn’t it be possible to specify it in the rest of the layout?

#24

Technically yes, but as I said, you’d have to include it on every card anyway - in order to style it. Btw, you could use those new attributes for styling too, so I think it’s pretty convenient.

#25

Ack, you have a point here. A card should define which values are correct and which arent. Not the layout (where the svg is placed).

Alright v2.0:

So you still have to add the class ‘kitsun-click’ to the elements you want clickable. But on your layout you insert {{click:fieldname}}, where fieldname is template field which consists of a comma separated list of ids that are considered correct.

3 Likes
#26

Okay, we’ve arrived at the perfect solution :blush:

I was thinking about suggesting that, but thought maybe it’s too much work.

There’s still the problem with the styles though…

#27

Maybe I have the wrong idea, I was seeing me saving 200 files and editing one line to correct each time :slight_smile:

#28

For the individual styling, we’d need another solution i think… As you would want to style per card while the svg is inside the layout (so only included once)…

1 Like
#29

Yeah, so the new solution is a lot better ^^;

1 Like
#30

Perhaps I can add a specific class to all the matching elements of the {{click:fieldname}} ids?

1 Like
#31

I was going to suggest a new field type for SVGs (so every card could have its own), but that doesn’t seem like a good idea on second thought…

That sounds like the easiest solution.

#32

Okay so to recap:

With the addition that every matching element will also receive a specific class (like correctanswer) which can be used to set specific styles (in your case you could change the color of the correct regions).

2 Likes
#33

Hmm I would also like to style the SVG as part of the question :slight_smile: Does it have to be connected to the click?

2 Likes
#34

That’s what @Neicudi meant ^^

1 Like
#35

I was just wondering that I’m not even using the click in 1:

#36

Ah. Hmm then perhaps creating yet another field type might work:

{{addclass:fieldname}} -> fieldname = template field with ids -> adds a class like correctanswer to matching elements?

So basically only the last part of the click field :stuck_out_tongue:

2 Likes
#37

Was gonna say the same thing. :smile:

2 Likes
#38

It’s easier to explain to someone that they have to style a class, than that they have to style elements based on a certain (data) attribute though. So I’m probably still going with a class :stuck_out_tongue:

#39

We were referring to where you put kitsunclick='correct'. :wink:

2 Likes
#40

Yup. Which also means it’s not longer relevant, considering the new solution ^^