I have a randomized Vignette (Text+picture). How do I combine it with a drop down?

Question

I have a randomized Vignette (Text+picture), written in HTML-Code and
I want the randomised Vignette to be seen through the whole survey,
via a hover-over button or a drop down.

The first part, the randomizing and the selection and display of a random vignette WORKS!

With this code: 
if (value('VI04') == 1) {
  text('VI02');
} elseif (value('VI04') == 2) {
  text('VI05');
} elseif (value('VI04') == 3) {
  text('VI06');
} elseif (value('VI04') == 4) {
  text('VI07');}

Now I want to use the same php code again later in the survey , so
that the Vignette is being displayed again. But this time I want the
Vignette to only be shown in a small window, or via a hover-over or
drop down button. I have the following php code, which i want to use
in my questionnaire, but it says, I am not allowed to use it?!

---

The Warning Message, that I get:

Warning: The PHP code contains functions or PHP elements that have not been released for use in the questionnaire. If you are of the opinion that the criticised constructs are harmless, please contact the administrator!

<?php // PHP-Block öffnen (nicht schließen, damit SoSciSurvey nicht meckert)

// 1. Zufallsgruppe auslesen $gruppe = value('VI04'); ?>

<style>   /* Container anfangs verstecken */   #toggle-content {
    display: none;
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 10px;   } </style>

<!-- Button zum Ausklappen --> <button type="button" id="toggle-btn">Vignette anzeigen</button>

<!-- Hier wird je nach Gruppe dein bereits existierender PHP-Code ausgegeben --> <div id="toggle-content"> <?php   // 2. Dein existierender Code:   if ($gruppe == 1) {
    text('VI02');   } elseif ($gruppe == 2) {
    text('VI05');   } elseif ($gruppe == 3) {
    text('VI06');   } elseif ($gruppe == 4) {
    text('VI07');   } ?> </div>

<script>   // Klick-Logik für den Button   const toggleBtn = document.getElementById('toggle-btn');   const toggleContent = document.getElementById('toggle-content');
     toggleBtn.addEventListener('click', () => {
    if (toggleContent.style.display === 'none') {
      toggleContent.style.display = 'block';
      toggleBtn.textContent = 'Vignette ausblenden';
    } else {
      toggleContent.style.display = 'none';
      toggleBtn.textContent = 'Vignette anzeigen';
    }   }); </script>

Answer 1

You're mixing CSS and HTML code with PHP code here - that won't work.

Place some HTML code above your PHP code (which will insert your vignette) and some below. Here's an example.

HTML code

<div class="hover">

PHP code

The one from the beginning of your question.

HTML code

</div>

PHP code

pageCSS('
    div.hover {
        overflow: hidden;
        max-height: 2em;
        transition: all 0.2s;
    }
    div.hover:hover {
        max-height: auto;
    }
');

Comments

Thanks for the quick response!
Unfortunately, it won't work this way.

I copied your code as it is above and also added my PHP Code in between, but now I can't see anything in my questionnaire.
Maybe because of the "hover" function?
Would it be easier if we instead try to implement a button, so we can have the text as a drop-down?

---

Please create and post a pretest link that start immediately on that page, so I can take a look.

Sure, you can also work with an additional button that takes care of showing/hiding a <div id="someID">, but the basic structure remains the same and in addition to HTML, CSS and PHP, you will also need JavaScript.