image toekennen aan een linker en rechterkolom

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Sietsko Bos

Sietsko Bos

29/05/2020 15:34:21
Quote Anchor link
Ik heb een array met images die ik wil koppelen aan een nummer in de linker en rechterkolom, heeft iemand een idee hoe ik dat kan doen?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$_SESSION['opdracht']

Array
(
    [0] => 012b
    [1] => 012aa
    [2] => 012ab
    [3] => 012ac
)

$_SESSION['lrij']

Array
(
    [0] => 3
    [1] => 0
    [2] => 2
    [3] => 1
)

$_SESSION['rrij']

Array
(
    [0] => 1
    [1] => 2
    [2] => 0
    [3] => 3
)


Het is de bedoeling dat het dan zo gekoppeld wordt met bijvoorbeeld een foreach.

linkerkolom en rechterkolom - image

Aan het nummer 3 en 1 - 012b
Aan het nummer 0 en 2 - 012aa
Aan het nummer 2 en 0 - 012ab
Aan het nummer 1 en 3 - 012ac

Ik heb het zo geprobeerd maar dat kan natuurlijk niet want dan worden niet de juiste images geplaatst.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
$i=1;
foreach ($_SESSION['lrij'] as $lrij_image) {
            
    $denod = $i - 1;
                
    echo '<div class="node"><img src="img/groep12/combinatiespel/'.$_SESSION['opdracht'][$lrij_image].'.png" width="50" height="50" alt=""/>';
    echo '<span class="node'.$i.'" data-connect="false" data-id="'.$denod.'" data-use="false" data-connected-to=""></span></div>';
    $i++;
}



Hopelijk is het zo duidelijk wat de bedoeling is.
Gewijzigd op 29/05/2020 15:52:04 door Sietsko Bos
 
PHP hulp

PHP hulp

15/07/2020 02:54:45
 
Gerhard l

gerhard l

29/05/2020 16:18:59
Quote Anchor link
Ik heb nog niet helemaal door wat je bedoelt. Maar als ik je voorbeeld code zie, als je de session lrij loopt, kan je op deze manier de bijbehorende image krijgen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
foreach ($_SESSION['lrij'] as $i => $lrij_image) {
    // image => $_SESSION['opdracht'][$i];
    // rrij => $_SESSION['rrij'][$i];
}
 
Thomas van den Heuvel

Thomas van den Heuvel

29/05/2020 16:29:14
Quote Anchor link
Huh? Dit komt dan toch gewoon overeen met de key van het afbeelding-array?

Maar je wilt niet dat de afbeeldingen elke keer in dezelfde volgorde staan wel? Daarom is het mogelijk een idee om de "links" en "rechts" arrays weer te sorteren op value, met behoud van de key-value associatie.

Heb je dus bijvoorbeeld:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
0 => 3
1 => 0
2 => 2
3 => 1

Dan kun je hier met behulp van asort() het volgende van maken:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
1 => 0
3 => 1
2 => 2
0 => 3

Vervolgens kun je de afbeeldingen op volgorde weergeven met behulp van:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
foreach ($leftArray as $index => $node) {
    // gebruik hier $index om de corresponderende afbeelding weer te geven
}
?>

Ik zie trouwens "opdracht" en "groep12" staan.

Zijn wij hier stap voor stap jouw huiswerk voor je aan het maken?

EDIT: dit was dus wederom een soort van sorteerprobleem en wederom bestond hier een eenvoudige functie voor waarmee je dit in 1x kunt tacklen. Als je nu de volgende keer eerst uitdenkt wat er functioneel zou moeten gebeuren en vervolgens ff op php.net zoekt naar functies die arrays kunnen manipuleren? :p
Gewijzigd op 29/05/2020 16:31:50 door Thomas van den Heuvel
 
Sietsko Bos

Sietsko Bos

29/05/2020 16:30:45
Quote Anchor link
De html zal er dan zo uit moeten komen te zien

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
<div class="group1">
    <div class="node"><img src="img/012aa.png" width="50" height="50" alt=""/><span class="node1" data-connect="false" data-id="0" data-use="false" data-connected-to=""></span></div>
    <div class="node"><img src="img/012ac.png" width="50" height="50" alt=""/><span class="node2" data-connect="false" data-id="1" data-use="false" data-connected-to=""></span></div>
    <div class="node"><img src="img/012ab.png" width="50" height="50" alt=""/><span class="node3" data-connect="false" data-id="2" data-use="false" data-connected-to=""></span></div>
    <div class="node"><img src="img/012b.png" width="50" height="50" alt=""/><span class="node4" data-connect="false" data-id="3" data-use="false" data-connected-to=""></span></div>
</div>
<div class="group2">
    <div class="node"><img src="img/012ab.png" width="50" height="50" alt=""/><span class="node5" data-connect="false" data-id="0" data-use="false"></span></div>
    <div class="node"><img src="img/012b.png" width="50" height="50" alt=""/><span class="node6" data-connect="false" data-id="1" data-use="false"></span></div>
    <div class="node"><img src="img/012aa.png" width="50" height="50" alt=""/> <span class="node7" data-connect="false" data-id="2" data-use="false"></span></div>
    <div class="node"><img src="img/012ac.png" width="50" height="50" alt=""/><span class="node8" data-connect="false" data-id="3" data-use="false"></span></div>
</div>


Toevoeging op 29/05/2020 16:33:53:

@ Thomas: Zijn wij hier stap voor stap jouw huiswerk voor je aan het maken?

Nee hoor,is voor oefenwebsite primair onderwijs :)
Gewijzigd op 29/05/2020 16:31:21 door Sietsko Bos
 
Thomas van den Heuvel

Thomas van den Heuvel

29/05/2020 19:45:43
Quote Anchor link
Zie mijn vorige reactie. asort() zou dit op moeten lossen.
 
Sietsko Bos

Sietsko Bos

29/05/2020 20:00:49
Quote Anchor link
Oeps, sorry was vergeten een bericht terug te plaatsen.
Het is inmiddels gelukt en alles werkt nu zoals de bedoeling was, dank je Thomas :)
 
Sietsko Bos

Sietsko Bos

04/06/2020 08:46:31
Quote Anchor link
Ik heb alles nu bijna werkend op een deel van de foutafhandeling na.
Ik kan wel controleren of de gemaakte verbindingen goed zijn of niet, ook kan ik laten zien welke verbindingen niet goed zijn. Wat ik nu nog niet voor elkaar krijg is:

Als een verbinding niet klopt wil ik later laten zien welke twee images niet goed waren.
Ik zal onder mijn arrays eens laten zien:

De sourcewaarde staat hier voor een image die ik haal uit:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$opdracht = array(111b, 111aa, 111ab, 111ac);

Dit is de array met de juiste verbindingen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Array
(
    [0] =&gt; Array
        (
            [source] =&gt; 0   // 111b
            [target] =&gt; 0   // 111b
        )

    [1] =&gt; Array
        (
            [source] =&gt; 1   // 111aa
            [target] =&gt; 3   // 111aa
        )

    [2] =&gt; Array
        (
            [source] =&gt; 2   // 111ab
            [target] =&gt; 1   // 111ab
        )

    [3] =&gt; Array
        (
            [source] =&gt; 3   // 111ac
            [target] =&gt; 2   // 111ac
        )

)

Nadat de user de verbindingen heeft gemaakt krijg ik deze array terug:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Array
(
    [0] =&gt; Array
        (
            [source] =&gt; 0
            [target] =&gt; 0
        )

    [1] =&gt; Array
        (
            [source] =&gt; 1
            [target] =&gt; 3
        )

    [2] =&gt; Array
        (
            [source] =&gt; 2
            [target] =&gt; 2
        )

    [3] =&gt; Array
        (
            [source] =&gt; 3
            [target] =&gt; 1
        )

)

Zoals je ziet zijn de verbindingen 2 en 3 (target) niet juist.
Ik wil nu ook een array krijgen (van de user vebindingen) waar voor elke verbinding de images in staan, dus op deze manier:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Array
(
    [0] =&gt; Array
        (
            [source_image] =&gt; 111b
            [target_image] =&gt; 111b
        )

    [1] =&gt; Array
        (
            [source_image] =&gt; 111aa
            [target_image] =&gt; 111aa
        )

    [2] =&gt; Array
        (
            [source_image] =&gt; 111ab
            [target_image] =&gt; 111ac
        )

    [3] =&gt; Array
        (
            [source_image] =&gt; 111ac
            [target_image] =&gt; 111ab
        )

)

Mijn vraag is hoe dat kan, ik ben al een tijdje bezig maar krijg het niet voor elkaar.
Gewijzigd op 04/06/2020 08:48:40 door Sietsko Bos
 
Thomas van den Heuvel

Thomas van den Heuvel

04/06/2020 16:22:31
Quote Anchor link
Zou het niet veel makkelijker zijn als je in dat laatste array ook gewoon met indexen werkt? Je krijgt dan eigenlijk precies het voorlaatste array?

Welke afbeeldingen voor de source en target op die positie staan staat hier in principe los van.

Sterker nog, deze is dus afleidbaar uit het $opdracht array en het voorlaatste array, maar het is dus niet per se nodig om hier (expliciet) een apart array voor te bouwen?

Ter verduidelijking: als je geen indexen specificeert in een array zoals $opdracht, dan worden deze vanaf 0 geïndexeerd.

Het volgende array:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
$opdracht
= array('111b', '111aa', '111ab', '111ac');
?>

Is dus precies hetzelfde als:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<?php
$opdracht
= array(
    0 => '111b',
    1 => '111aa',
    2 => '111ab',
    3 => '111ac',
);

?>

(maar misschien dus nog wel even quotes toevoegen)

$opdracht kun je dus gebruiken in combinatie met / toepassen op het voorlaatste array om de bijbehorende afbeelding te vinden?
 
Sietsko Bos

Sietsko Bos

05/06/2020 08:42:15
Quote Anchor link
De laatste array hoeft ook niet perse hoor.
Ik krijg het niet voor elkaar om de juiste images te koppelen (voorlaatste array is de array die ik nu ook heb).

Ik begrijp alleen het koppelen van de indexen met de value niet.

De eerste array gaat ook goed en ik heb erachter gezet welk image dan gekoppeld wordt.
Maar dan de tweede array juist koppelen met het image lukt niet.

Ik heb het nu zo geprobeerd zonder een array (wat voor mij nog beter is want ik wil het zo in de database opslaan):

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
$i
=0;
foreach ($antwoorden as $images) {
            
    if ($i == 0) {
        $devraag = $_SESSION['opdracht'][$images['source']];
    }
else {
        $devraag = $devraag . ' ' .$_SESSION['opdracht'][$images['source']];
    }

    $i++;
}


// $devraag volgorde ziet er dan zo uit:  322b 322aa 322ab 322ac
?>


Maar hoe doe je dit nu zodat de target van de tweede array klopt met het juiste image?
Die zou er dus zo uit moeten zien: 322b 322aa 322ac 322ab
Gewijzigd op 05/06/2020 08:43:36 door Sietsko Bos
 
Thomas van den Heuvel

Thomas van den Heuvel

05/06/2020 15:27:04
Quote Anchor link
Ugh, ik zou dit niet zo geserialiseerd opslaan, want dan moet je dat na afloop weer uit elkaar peuteren. Dat is niet waar een database voor bedoeld is :p.

Ik zou dit alles (of op zijn minst: de koppelingen die de gebruiker legt) ook niet aan afbeeldingen ophangen, maar aan de volgnummers/indexen. Welke afbeelding hier bij hoort staat hier (nogmaals) los van (en is meer onderdeel van de "goede oplossing").

Als de volgorde van zowel de sources alsook de targets random is, dan zul je beide stukken informatie moeten opslaan, te meer als je deze "random volgorde" wilt vastleggen?

Overigens, als je uitgaat van het tweede array, komt dan de key van het subarray dan niet altijd overeen met de source-waarde? En zelfs als dit niet het geval is, zou je dit kunnen vereenvoudigen tot een array met een dimensie minder, waarbij je een mapping <source> => <target> maakt? Je kunt dit dus nog wel wat verder platslaan allemaal.

Bij het opstellen van bijbehorende datastructuren (vertalingen naar arrays) helpt het enorm als je alles zo simpel mogelijk houdt.

Uitgaande van de volgende opzet:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
/*
het volgende is dus equivalent met
$userData = array(
    0 => 0,
    1 => 3,
    2 => 2,
    3 => 1,
)
*/

$userData = array(0, 3, 2, 1);
/*
nota bene, als de sources ook een random volgorde hebben, zou je hier prima het volgende van kunnen maken:
$userData = array(1 => 3, 0 => 0, 3 => 1, 2 => 2);
of wat dan ook
*/

?>

Zou je zoiets kunnen doen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<?php
foreach ($userData as $source => $target) {
    $sourceImage = $opdracht[$source];
    $targetImage = $opdracht[$target];
    // doe hier iets mee
    // ...

}
?>

Maar nogmaals, ik zou de gegeven antwoorden niet als "afbeelding" opslaan, maar simpelweg als een volgnummer voor de geselecteerde afbeelding. Welke afbeelding dit is (en in welke volgorde deze staan) houd je ergens anders bij.
 
Sietsko Bos

Sietsko Bos

06/06/2020 11:58:21
Quote Anchor link
Ik begrijp wat je bedoeld maar als de hele boel overhoop moet dan gaat dat lastig worden omdat er ook nog javascript achter zit waar ik niets van begrijp.

Vandaar ook dat ik het op de gevraagde manier probeerde op te lossen omdat het wel goed werkt met de scrpts.
Wel daargelaten of het op de juiste manier is gedaan....

Als er geen makkelijke oplossing is om de koppelingen te bewaren in de database dan moet ik dat laten varen. Wat ook een mogelijkheid is om iemand tegen betaling de scripts werkend te laten maken, cq om te bouwen.

De antwoorden komen van het script uit mijn andere vraag:

https://www.phphulp.nl/php/forum/topic/controleren-of-2-values-bestaan-in-een-array/103561/
Gewijzigd op 06/06/2020 11:59:38 door Sietsko Bos
 
Thomas van den Heuvel

Thomas van den Heuvel

06/06/2020 17:44:39
Quote Anchor link
Hoe je dingen aan JavaScript ophangt en hoe je dit in PHP behandelt en hoe je dit in de database opslaat staat in principe allemaal los van elkaar. Dit zijn ook aparte problemen/vraagstukken die je in afzondering kunt behandelen.

We zijn al een heel eind hoor.

Natuurlijk is het ook mogelijk om het op te slaan zoals jij voorstelt, maar dat lijkt mij gewoon een stuk omslachtiger.

En als je het dan toch geserialiseerd wilt doen, maak dan gebruik van JSON ofzo, zodat je dat in één klap kunt inpakken en uitpakken (en gebruiken) via json_encode() en json_decode().
 
Sietsko Bos

Sietsko Bos

06/06/2020 18:18:49
Quote Anchor link
Maar is het dan niet veel handiger om het nu dan zo op te slaan als ik voorstelde?
Lijkt me wel handiger omdat alles eigenlijk zover werkt en klaar is op deze code na.

Ik krijg de array al terug zoals jij voorstelde en die zet ik dan ook om naar php met json_decode().

Dat zijn dus de eerste array (mijn eigen waarvan de target random is), de source staat wel altijd in die volgorde.
En de tweede array die ik krijg nadat de user de verbindingen heeft gemaakt.

Ook is de optie die ik voorstelde voor mij wat makkelijker omdat ik dat zelf ook eenvoudiger kan aanpassen voor weer andere scripts.

Dus heb je een oplossing voor me... graag :)
 
Thomas van den Heuvel

Thomas van den Heuvel

06/06/2020 20:07:14
Quote Anchor link
Je hebt alle puzzelstukken al. De waarden van de "source"s en de "target"s komen overeen met de indices van de afbeeldingen.

Waar loop je precies op vast?
 
Sietsko Bos

Sietsko Bos

07/06/2020 10:18:45
Quote Anchor link
Waar loop je precies op vast?

Het doorlopen van de user array en het koppelen van de target met het image.


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<?php
foreach ($userData as $source => $target) {
    $sourceImage = $opdracht[$source];
    $targetImage = $opdracht[$target];
    // doe hier iets mee
    // ...

}
?>


Als ik het op deze manier zou doen dan gaat het niet kloppen omdat de waarde van de source en target de plaats aangeven en niet het image. Dus als ik dit heb:

0 - 0
1 - 1
2 - 2
3 - 3

Dan zou ik voor de linkerrij de images kunnen zetten (322b 322aa 322ab 322ac), maar voor de rechterrij is dat anders omdat de waarde dan een ander image heeft.
De waardes van de source en target geven dus de plaats van hetzelfde image aan, niet het image zelf..


Uitgaande van deze array:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Array
(
    [0] =&gt; Array
        (
            [source] =&gt; 0
            [target] =&gt; 0
        )

    [1] =&gt; Array
        (
            [source] =&gt; 1
            [target] =&gt; 3
        )

    [2] =&gt; Array
        (
            [source] =&gt; 2
            [target] =&gt; 2
        )

    [3] =&gt; Array
        (
            [source] =&gt; 3
            [target] =&gt; 1
        )

)

0 source is hetzelfde image als target 0
1 source is hetzelfde image als target 3
2 source is hetzelfde image als target 2
3 source is hetzelfde image als target 1

Hierbij is de target ook random dus die staan qwa waarde niet vast.

De source zetten met opdracht[$source] gaat wel goed maar dan....
Want de 3 target is niet hetzelfde als 3 source want 3 target zou opdracht[1] moeten zijn.
Gewijzigd op 07/06/2020 10:19:12 door Sietsko Bos
 
Thomas van den Heuvel

Thomas van den Heuvel

07/06/2020 16:55:29
Quote Anchor link
Uitgaande van het bovenstaande array:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<?php
foreach ($array as $data) {
    $sourceImage = $opdracht[$data['source']];
    $targetImage = $opdracht[$data['target']];
    // ... et cetera ...
}
?>

$data is de value van het key-value paar van $array. In dit geval is dat dus een enkele rij / subarray. Dit is dus zelf ook weer een array dus kun je die ook als zodanig gebruiken. $data['source'] bevat de index van de bron-index/afbeelding en $data['target'] die van de doel-index/afbeelding. Beide indexen pas je toe op $opdracht om de bijbehorende afbeelding te vinden.

Misschien loont het de moeite om wat meer te oefenen met (geneste) arrays?

Maar er is in principe geen verschil tussen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<?php
array(
    'source' => 3,
    'target' => 1,
);

?>

Ten opzichte van:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
array(3 => 1);
?>

In die zin dat het ene array meer zinvolle informatie zou "transporteren" dan de ander, het is simpelweg een andere manier van verpakken.

Het is meestal handig om alles zo compact mogelijk te houden, zodat je later minder werk hebt aan "overhead" (source, target etc.) die je mogelijk anders zou hebben. De code die hierop werkt wordt dan ook langer zoals het bovenstaande fragment demonstreert, terwijl het functioneel precies hetzelfde doet.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.