[Sugarcube 2.18]Handling a lot of if´s at once

Question

Hey there,

So my problem is that i have a Passage with a lot of Possible if´s.

each of the if should show a Different html5 picture.

 

what i could do is 

<<set $riddle eq random(1,29)>>
  <<if $riddle eq 1>>
     <img src="content/riddle1.jpg" width="500" height="300" alt="riddle">
   <<elseif $riddle eq 2>>
     <img src="content/riddle2.jpg" width="500" height="300" alt="riddle2">
   .
   .
   .
   <<elseif $riddle eq 29>>
    <img src="content/riddle29.jpg" width="500" height="300" alt="riddle">
   <</if>>

that would leave me with a ton a blank space tho and would be a lot of typing over and over again.is there anyway to shorten that out?I only want 1 of the pictures to show up.I would need the same thing with webm file afterwards.

so instead of 

<img src="content/riddle1.jpg" width="500" height="300" alt="Two foxes">

I need:

<video src="content/hriddle1.webm" width="500" height="300" alt="hriddle">

 

kind regards.

Answer 1

It's not clear how you want to show the images or how they are named, since the code example you posted doesn't contain anything related to it. For the answer, I'll just assume they are all in a "riddle" folder and named "img1.jpg" through "img29.jpg". Then it's just a matter of writing ...

<<set $riddle = random(1, 29)>>
[img["riddle/img" + $riddle + ".jpg"]]

If you have any different requirements, please edit your question and explicitly state them.

EDIT: With the edited question, the above would still work but miss with width, height and alt attributes. The first two are best done in CSS since they are constant, so the answer becomes:

<<set $riddle = random(1, 29)>>
<<= "<img src='content/riddle" + $riddle + ".jpg' alt='riddle" + $riddle + "' class='riddleImg'>">>

And then, in the stylesheet of your game, you can make sure the image size is correct:

img.riddleImg {
    min-width: 500px;
    min-height: 300px;
    width: 500px;
    height: 300px;
}

 

Comments

thanks that works fine.

really saved me alot of typing.

---

thanks again really helpfull.

Answer 2

Among the many things you could do, three simple ones would be:

1. Using a <<switch>> macro with line continuations.
2. Pulling the image path randomly from an array using the <Array>.random() method.
3. If your image names are regular (i.e. image1.png, image2.png, ... image29.png), constructing the image path programmatically.

 

Example 1: <<switch>> macro and line continuations

<<set $riddle to random(1, 29)>>
.
.
.
<<switch $riddle>>
<<case 1>>[img[image1]]\
<<case 2>>[img[image2]]\
.
.
.
<<case 29>>[img[image29]]\
<</switch>>

If you're only setting $riddle to select the image and do not need it afterwards, then I'd suggest either using a temporary variable or simply doing away with it altogether.

Using a temporary variable:

<<set _riddle to random(1, 29)>>
.
.
.
<<switch _riddle>>

Doing away with it entirely:

<<switch random(1, 29)>>

 

Example 2: Image array example

/* You should probably do this within the StoryInit special passage. */
<<set setup.Images to [
	"path/to/foo.jpg",
	"path/to/bar.png",
	"path/to/baz.webp",
	"path/to/qaz.gif"
]>>


/* To pull an image path random from the array. */
[img[setup.Images.random()]]

 

Example 3: Programmatically constructing the image path

<<set $riddle to random(1, 29)>>
.
.
.
[img["path/to/image" + $riddle + ".jpg"]]

And again, if you're only setting $riddle to select the image and do not need it afterwards, then I'd suggest either using a temporary variable or simply doing away with it altogether.

Using a temporary variable:

<<set _riddle to random(1, 29)>>
.
.
.
[img["path/to/image" + _riddle + ".jpg"]]

Doing away with it entirely:

[img["path/to/image" + random(1, 29) + ".jpg"]]

 

PS: The eq operator is the lazy equality test operator and not the assignment operator, which is to.  Also, I generally recommend the use of the strict equality test operator, which happens to be is.  See <<set>> and <<if>> for more information.

/* WRONG */
<<set $riddle eq random(1, 29)>>

/* CORRECT */
<<set $riddle to random(1, 29)>>

 

Comments

I justed your 3th method for it.

It works fine now thanks that saved me alot odf typing.

Does this also work with webm/mp4 files the same way?

---

You need to use the <video> tag for WEBM/MP4, files, like this:

<video loop autoplay src="content/video.mp4"></video>

Or, if you want your riddles to be WEBMs:

<<= "<video loop autoplay src='content/riddle" + $riddle + ".webm' alt='riddle" + $riddle + "' class='riddleImg'></video>">>

The CSS selector to style the videos becomes then video.riddleImg instead of img.riddleImg.

 

---

Yes, though you'd have to print the markup to sort of prerender the random number into it.  For example (and going along with your edited post):

/* Using the HTML <img> tag. */
<<= '<img src="content/riddle' + $riddle + '.jpg" width="500" height="300" alt="riddle' + $riddle + '">'>>

/* Using the HTML <video> tag. */
<<= '<video src="content/hriddle' + $riddle + '.webm" width="500" height="300" alt="hriddle' + $riddle + '"></video>'>>

 

---

Side note (I had to look it up too to be sure): According to the documentation at MDN, the ending "</video>" is mandatory.

---

Correct.  Both of the multimedia elements (i.e. <audio> and <video>) are non-void (i.e. they're containers which require an end tag).