Wybór z wielu pól i wynik na końcu strony

Question

Cześć mam taki problem. Muszę zrobić taką stronę z wieloma wyborami. Np: wybieram z pierwszego punktu 1, z drugiego punktu wybór2, z trzeciego punktu 5, klikam w button  w miejsce wynik wyboru pojawia się grafika lub html pasująca do 3 wcześniejszych wyborów. Gdy wybiorę inne opcje z każdego punktu w miejscu wynik wyboru pojawi się coś innego. Ma ktoś pomysł jak to zrobić? Ogólnie bym chciał to zrobić na wordpressie(jeden page albo postype) ponieważ takich stron dużo tylko wynik się zmienia.

 

 

Comments

ale, chcesz żeby każda kombinacja miała inne rozwiązanie ?

---

Dokładnie, każda kombinacja ma inne rozwiązanie:).

Answer 1

Może za pomocą "ukrytych" <input> radio i checkbox.  

Propozycja.

<div class="choice-grid-container">
  <div class="choice-row-title-1">1.</div>    
  <div class="choice-row-1">
    <ul>
      <li>
        <input type="radio" name="chb1" id="chb1-1" checked
               value="https://source.unsplash.com/260x211">
        <label for="chb1-1">
          <img src="https://source.unsplash.com/260x211">            
        </label>
      </li>
      <li>
        <input type="radio" name="chb1" id="chb1-2"
               value="https://source.unsplash.com/260x212">
        <label for="chb1-2">
          <img src="https://source.unsplash.com/260x212">          
          </abel>
      </li>
    </ul>
  </div>
  <div class="choice-row-title-2">2.</div>
  <div class="choice-row-2">
    <ul>
      <li>
        <input type="radio" name="chb2" id="chb2-1" checked
               value="Lorem ipsum dolor sit amet, consectetur 1">
        <label for="chb2-1">Lorem ipsum dolor sit amet, consectetur 1</label>
      </li>
      <li>
        <input type="radio" name="chb2" id="chb2-2"
               value="Consectetur, lorem ipsum dolor sit amet 2">
        <label for="chb2-2">Consectetur, lorem ipsum dolor sit amet 2</label>
      </li>
      <li>
        <input type="radio" name="chb2" id="chb2-3"
               value="Lorem ipsum dolor sit amet, consectetur 3">
        <label for="chb2-3">Lorem ipsum dolor sit amet, consectetur 3</label>
      </li>     
    </ul>
  </div>
  <div class="choice-row-title-3">3.</div>
  <div class="choice-row-3">
    <div class="tag-wrap">
      <div class="tag">
        <input type="checkbox" name="chb3-1" id="chb3-1"
               value="Tag lorem 1">
        <label for="chb3-1">Tag lorem 1</label>     
      </div>
      <div class="tag">
        <input type="checkbox" name="chb3-2" id="chb3-2"
               value="Tag lorem 2">
        <label for="chb3-2">Tag lorem 2</label>     
      </div>
      <div class="tag">
        <input type="checkbox" name="chb3-3" id="chb3-3"
               value="Tag lorem 3">
        <label for="chb3-3">Tag lorem 3</label>     
      </div>
      <div class="tag">
        <input type="checkbox" name="chb3-4" id="chb3-4"
               value="Tag lorem 4">
        <label for="chb3-4">Tag lorem 4</label>     
      </div>
      <div class="tag">
        <input type="checkbox" name="chb3-5" id="chb3-5"
               value="Tag lorem 5">
        <label for="chb3-5">Tag lorem 5</label>     
      </div>
      <div class="tag">
        <input type="checkbox" name="chb3-6" id="chb3-6"
               value="Tag lorem 6">
        <label for="chb3-6">Tag lorem 6</label>     
      </div>     
    </div>
  </div>
  <div class="choice-row-title-button"></div>
  <div class="choice-row-button">
    <button>Wybierz</button>
  </div>
  <div class="choice-row-title-result">Twój wybór</div>
  <div class="choice-row-result"></div>
</div>

<template>
  <div class="result-grid-container">
    <div class="result-choice-row-1">
      <image src="{{src}}" alt="{{alt}}">
    </div>
    <div class="result-choice-row-2">{{img_title}}</div>
    <div class="result-choice-row-3">{{tags}}</div>
  </div>
</template>

* {
  box-sizing: border-box;
}
html, body, .choice-grid-container { 
  height: 100%;
  margin: 0;
  background-color: black;
  color: white;
}


.choice-grid-container {
  display: grid;
  grid-template-columns: 0.1fr 2fr;
  grid-template-rows: 1fr 1fr 0.5fr 0.25fr 2.25fr;
  gap: 0;
  grid-template-areas:
    "choice-row-title-1 choice-row-1"
    "choice-row-title-2 choice-row-2"
    "choice-row-title-3 choice-row-3"
    "choice-row-title-button choice-row-button"
    "choice-row-title-result choice-row-result";

  width: 450px;
  margin: 1em;
}

.choice-row-title-1 { grid-area: choice-row-title-1; }
.choice-row-1 { grid-area: choice-row-1; }
.choice-row-title-2 { grid-area: choice-row-title-2; }
.choice-row-2 { grid-area: choice-row-2; }
.choice-row-title-3 { grid-area: choice-row-title-3; }
.choice-row-3 { grid-area: choice-row-3; padding: 0; }
.choice-row-title-button { grid-area: choice-row-title-button; }
.choice-row-button { grid-area: choice-row-button; }
.choice-row-title-title { grid-area: choice-row-title-title; }
.choice-row-result { grid-area: choice-row-result; }

/* do testów 
.choice-grid-container * {
border: 1px solid red;
}
*/


/* ----- choice-row all ----------------------------------- */
[class^="choice-row-title"] {
  display: flex;
  justify-content: center;
  align-items: center;
}
[class^="choice-row"] input[type="radio"][name^="chb"] {
  display: none;
}
[class^="choice-row"] input[type="checkbox"][name^="chb"] {
  display: none;
}
[class^="choice-row"] ul {
  margin: 0;
  padding: 0;
}
[class^="choice-row"] li {
  list-style-type: none;
}
[class^="choice-row"] button, label {
  cursor: pointer;
  user-select: none;
}

/* ----- choice-row-1 ----------------------------------- */
.choice-row-1 li {
  display: inline-block;  
}
.choice-row-1 label {
  display: block;
  margin: 1em;
}
.choice-row-1 label img {
  width: 160px;
  height: 110px;  
  padding: 0.25em;
  border-radius: 0.5em;
  box-shadow: 0 0 2px 4px gray;
  transition-duration: 0.35s;
}
.choice-row-1 input[type="radio"][name^="chb"]:checked + label img {
  transform: scale(0.95);
  box-shadow: 0 0 2px 4px limegreen;
}

/* ----- choice-row-2 ----------------------------------- */
.choice-row-2 li {
  width: 24em;
  font: 1.05em/1.3em monospace;
  margin: 0.65em;
  border-radius: 0.5em;
  box-shadow: 0 0 2px 4px transparent;
}
.choice-row-2 label {
  display: block;
  padding: 0.15em 0.25em;
  border-radius: 0.5em;  
  transition-duration: 0.25s;
}
.choice-row-2 input[type="radio"][name^="chb"]:checked + label {
  box-shadow: 0 0 2px 4px limegreen;
  transform: scale(0.98);
}

/* ----- choice-row-3 ----------------------------------- */
.choice-row-3 .tag-wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 0.6em 0.4em;
  width: 88%;
}
.choice-row-3 .tag-wrap .tag {
  flex-grow: 1;
  font: 1em/1.3em monospace;
  width: 24%;
  height: 1.8em;
  margin: 0.3em;
  border-radius: 0.5em;
  box-shadow: 0 0 2px 4px transparent;
}
.choice-row-3 .tag-wrap .tag label {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 0.5em;
  justify-content: center;
  align-items: center;
  transition-duration: 0.25s;
}
.choice-row-3 .tag-wrap .tag:nth-child(even) {
  background: gray;
  color: black;
}
.choice-row-3 .tag-wrap .tag:nth-child(odd) {
  background: silver;
  color: black;
}
.choice-row-3 input[type="checkbox"][name^="chb"]:checked + label {
  box-shadow: 0 0 2px 4px limegreen;
}

/* ----- choice-row-button ------------------------------ */
.choice-row-button button {
  font: 1.05em/1.8em monospace;
  margin: 0.65em;
  width: 84%;
  border-radius: 1em;
  outline: none;
}

/* ----- choice-row-result ------------------------------ */
.choice-row-title-result {
  font: 0.8em/1em monspace;
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: limegreen;
}

.choice-row-result {
  margin: 0;
  padding: 0;
  height: 360px;
}
.choice-row-result .result-grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 0.25fr 1fr;
  gap: 1em 0;
  grid-template-areas:
    "result-choice-row-1"
    "result-choice-row-2"
    "result-choice-row-3";
  
  width: 90%;
  height: 100%;
  margin: 1em;
}
.result-choice-row-1 { grid-area: result-choice-row-1; }
.result-choice-row-2 { grid-area: result-choice-row-2; }
.result-choice-row-3 { grid-area: result-choice-row-3; }

.choice-row-result .result-choice-row-1 img {
  width: 260px;
  height: 210px;
}
.choice-row-result .result-choice-row-3 span {
  display: inline-block;
  font: 0.8em/1em monospace;
  width: 25%;
  margin: 0.4em;
  padding: 0.2em 0.4em;
  border-radius: 0.5em;
  text-align: center;
}
.choice-row-result .result-choice-row-3 span:nth-child(even) {
  background: gray;
  color: black;
  border: 1px solid silver;
}
.choice-row-result .result-choice-row-3 span:nth-child(odd) {
  background: silver;
  color: black;
  border: 1px solid gray;
}

const radios_row_1 = document.querySelectorAll('input[name="chb1"]');
const radios_row_2 = document.querySelectorAll('input[name="chb2"]');
const checkboxes_row_3 = document.querySelectorAll('input[name^="chb3"]');

const button_ = document.querySelector('.choice-row-button button');
const view    = document.querySelector('.choice-row-result');
const templ   = document.querySelector('template').innerHTML;

button_.addEventListener('click', () => {  
  let html = templ;
  radios_row_1.forEach(radio => {
    if (radio.checked) {
      html = html.replace('{{src}}', radio.value).replace('{{alt}}', radio.value);
    }    
  })
  
  radios_row_2.forEach(radio => {
    if (radio.checked) {
      html = html.replace('{{img_title}}', radio.value);
    }    
  })

  let span = '';
  checkboxes_row_3.forEach(checkbox => {
    if (checkbox.checked) {
      span += `<span>${checkbox.value}</span>`;
    }    
  })
  html = html.replace('{{tags}}', span);
  
  view.innerHTML = html;
});

Answer 2

Jako że pytanie ogólne, to podam odpowiedz bez szczegółów :)

jak naciśniesz buttona to z czytujesz wartości pól np:

var 1 = 1;

var 2 = 2;

var 3  = 1;

następnie, przypuśćmy ze chcesz wgrać grafikę:

w div nazwijmy go "wynik wyboru" wgrywasz imgUrl

a ten imgUrl możesz uzyskać np tak:

imgUrl = 1 + "\" + 2 +"\" + 3 + ".jpg"

$("#wynik wyboru").html("<img src='" + imgUrl + "' />");

nie trzeba podmieniac całego html'a można użyc .attr('scr',imgUrl)

Comments

Jeśli jest taka możliwość to poproszę o więcej szczegółów. Jest to najbardziej optymalne rozwiązanie:)?