Get Image path and set it to flag

I'm programming a sort of game in an xml-file and doing fine so far. The game is build like pages which will randomly pop up troughout the gameplay and show encounters with other people or creatures. It's working fine so far but I've now run into a problem where I desperately need help.

As you can see in my example, I've build a page for random monster-encounters. I want the picture loaded with this page to set, which monster is encountered and thus which event or story will be loaded next. For that I need to set a flag (for example set="Ogre" if the picture of an ogre is loaded or set="Troll" if the picture of the troll is loaded). But everything I tried to do so didn't work so far (for example, I've tried to get and set the image-id with javascript which I'm not an expert in).

<Page id="monsterencounter">
  <Text>
      <p>A wild monster apeared. Prepare to fight.</p>
    </div>
  </Text>
  <Image id="randomEncounter\Monster\*.jpg" />
  <Delay seconds="30" target="monster(1..30)" start-with="" style="hidden" />
  <Button target="monster(1..30)">Continue</Button>
</Page>

How do i get the id of the randomly loaded image and set it to a flag so that the game loads the correct page for a Ogre when an Ogre is spawned and not for a Troll? Is it even possible to do so?

The only other way I can think of is to make a single page for every possible monster encounter. On this way I would have to make 30 pages for a function I only would need one page for. And I'd like to avoid such bad programming if possible.