Forum d'entraide PHPFrance

bonjour a tous et merci a spol pour les réponses,

j'ai un souci de placement de html dans le script, je devrai avoir les balise input sous les images, mais il se trouve en dehors et en dessous....

<?php

function displaySelectReponse($choix, $key)
    {
    $images = array(
        '0' => array(
            'image' => 'img/douche.gif'
        ) ,
        '1' => array(
            'image' => 'img/poubelle.gif'
        ) ,
        '3' => array(
            'image' => 'img/souris.gif'
        ) ,
        '4' => array(
            'image' => 'img/soupe.gif'
        ) ,
        '5' => array(
            'image' => 'img/couteau.gif'
        ) ,
        '6' => array(
            'image' => 'img/tournevis.gif'
        ) ,
        '7' => array(
            'image' => 'img/journal.gif'
        ) ,
        '8' => array(
            'image' => 'img/rouge.gif'
        )
    );
    $select = '';
    $i = 8;
    foreach($images as $key => $image)
        {
        echo "<article class='content_img'>";
        echo '<figure><img src="' . $image['image'] . '" width="75" height="75" alt="" /></figure>';
        if ($select !== $i)
            {
            $select.= "<p><input name='$choix' class='textfield' type='text' size='20' maxlength='60'></p>";
            }

        echo "</article>";
        }

    return $select;
    }

function displayReponse($choix)
    {
    global $errors, $reponses;
    $mot = $reponses[$choix]['mot']['image'];
    $reponse_class = 'ok';
    $resultat = '';
    if (array_key_exists($choix, $errors))
        {
        $reponse_class = 'error';
        $resultat = " => " . $reponses[$choix]['reponse'];
        }

    $reponse = '<li class="' . $reponse_class . '">';
    $reponse.= '<span style="font-size:1.3em;" class="reponse">' . htmlspecialchars($_POST[$choix]) . '</span>
            <span style="margin-left:1%;font-size:1.3em;"">' . $mot . '</span>';
    $reponse.= ' <span style="color:red;font-size:1.3em;margin-left:5%;"" class="resultat">' . $resultat . '</span> ';
    $reponse.= '</li>';
    return $reponse;
    }

$form_ok = false;
$reponses = array(
    'chx_0' => array(
        'mot' => 'une',
        'reponse' => 'douche',
        'image' => 'img/douche.gif'
    ) ,
    'chx_1' => array(
        'mot' => 'une',
        'reponse' => 'poubelle',
        'image' => 'img/poubelle.gif'
    ) ,
    'chx_2' => array(
        'mot' => 'une',
        'reponse' => 'souris',
        'image' => 'img/souris.gif'
    ) ,
    'chx_3' => array(
        'mot' => 'une',
        'reponse' => 'soupe',
        'image' => 'img/soupe.gif'
    ) ,
    'chx_4' => array(
        'mot' => 'un',
        'reponse' => 'couteau',
        'image' => 'img/couteau.gif'
    ) ,
    'chx_5' => array(
        'mot' => 'un',
        'reponse' => 'tournevis',
        'image' => 'img/tournevis.gif'
    ) ,
    'chx_6' => array(
        'mot' => 'un',
        'reponse' => 'journal',
        'image' => 'img/journal.gif'
    ) ,
    'chx_7' => array(
        'mot' => 'une',
        'reponse' => 'carre-rouge',
        'image' => 'img/carré-rouge.gif'
    )
);

if (isset($_POST['correction']) && $_POST['correction'] === 'correction')
    {
    $empty = false;
    foreach($reponses as $key => $value)
        {
        if (empty($_POST[$key]))
            {
            $empty = true;
            }
        }

    if ($empty)
        {
        $msg = '<p>Veuillez cochez toutes les cases !</p>';
        echo $msg;
        }
      else
        {
        $form_ok = true;
        $errors = array();
        foreach($reponses as $key => $value)
            {
            if ($_POST[$key] == $value['reponse'])
                {
                $errors[$key] = htmlspecialchars($_POST[$key]);
                }
            }
        }
    }

?>
    <?php

if (!$form_ok)
    { ?>
            <form action="" method="POST" />
            
            <?php
    foreach($reponses as $choix => $reponse)
        {
        if ($choix !== $reponse)
            {
            echo displaySelectReponse($choix, $reponse['mot']);
            break;
            }
        }

?>
            <input class="correction_center" type="submit" name="correction" value="correction"/>
            </form>
            <?php
    }


  else
	{ ?>
            <p style="text-align:center;padding:4% 0 0 0;font-size:1.6em;font-weight:bold;display:block;" >Corrigé de l'exercice :</p>
            <div class="blc_reponses">
              <ol style="text-align:left;" class="reponses">
                <?php
	foreach($reponses as $choix => $value)
		{
		echo displayReponse($choix);
		} ?>
              </ol>
              <h2 style="display:inline-block;">Bonnes réponses :</h2>
              <p><?php
	echo count($reponses) - count($errors); ?> / <?php
	echo count($reponses); ?></p>
            </div>
            <div class="main_sec" style="text-align:center;margin-left:-10px;"> <span><a href="exo_ou_1.php">REFAIRE L'EXERCICE</a></span> <span><a href="exo_ou_2.php">EXERCICE SUIVANT</a></span> </div>
            <?php
	} ?>

merci pour votre aide.

C'est en CSS que tu dois arranger cela. En jouant sur tes marges pour placer les éléments comme tu le veux

Bonjour et merci.
Le souci est que mes balises p et input se retrouve en dehors du block principal et meme en css, rien a faire.

Merci

D'après ton code, les balises input sont comprise dans une balise p qui est comprise avec une balise figure dans une balise article.

Est-ce ce que tu obtient en HTML ?
Quelle structure veux tu ?

D'après une rapide recherche, tu pourrais mettre ta balise input dans une balise figcaption incluse dans ta balise figure cela devrait plus correspondre à ce que tu décrit.

foreach($images as $key => $image)
        {
        echo "<article class='content_img'>";
        echo '<figure><img src="' . $image['image'] . '" width="75" height="75" alt="" />';
        if ($select !== $i)
            {
            $select.= "<figcaption><input name='$choix' class='textfield' type='text' size='20' maxlength='60'></figcaption>";
            }

        echo "</figure></article>";
        }

PS je maintien qu'il doit y avoir moyen de régler cela en CSS