如何从Laravel/Livewire中的动态问卷中获取结果?

huangapple go评论73阅读模式
英文:

how to get result from dynamic questionary in Laravel/Livewire

问题

您目前的代码已经可以根据用户的答案提供相应的问题了。但是您想要添加的功能是显示结果,您可以这样做。假设用户选择了“否”回答第7个问题,那么它应该弹出一个结果,显示“第7个问题 否 结果”,如果用户选择“是”,则应该显示“第7个问题 是 问题”。以下是如何实现这一功能的示例代码:

首先,您可以在Question控制器中添加一个公共属性来存储结果,例如:

public $result;

然后,在answer方法中,根据用户的答案设置结果。修改answer方法如下:

public function answer($answer)
{
    if ($answer == 1) {
        $this->currentQuestion = $this->nextYesQuestion($this->currentQuestion);
        $this->result = "Question {$this->currentQuestion} Yes question";
    } elseif ($answer == 0) {
        $this->currentQuestion = $this->nextNoQuestion($this->currentQuestion);
        $this->result = "Question {$this->currentQuestion} No result";
    }
}

接下来,在您的Blade模板中,您可以显示结果。修改模板文件如下:

<div class="gap-6 lg:gap-8">
    <!-- 1 question -->
    <div class="scale-100 p-6 bg-white dark:bg-gray-800/50 dark:bg-gradient-to-bl from-gray-700/50 via-transparent dark:ring-1 dark:ring-inset dark:ring-white/5 rounded-lg shadow-2xl shadow-gray-500/20 dark:shadow-none flex motion-safe:hover:scale-[1.01] transition-all duration-250 focus:outline focus:outline-2 focus:outline-red-500">
        <div>
            <div class="h-16 w-16 bg-red-50 dark:bg-red-800/20 flex items-center justify-center rounded-full">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-7 h-7 stroke-red-500">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.115 5.19l.319 1.913A6 6 0 008.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 002.288-4.042 1.087 1.087 0 00-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17 .195a1.125 1.125 0 01-.98-.314l-.295-.295a1.125 1.125 0 010-1.591l.13-.132a1.125 1.125 0 011.3-.21l.603.302a.809 .809 0 001.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 001.528-1.732l.146-.292M6.115 5.19A9 9 0 1017.18 4.64M6.115 5.19A8.965 8.965 0 0112 3c1.929 0 3.716.607 5.18 1.64"/>
                </svg>
            </div>

            <h2 class="mt-6 text-xl font-semibold text-gray-900 dark:text-white">Question </h2>

            <p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
                {{ $question }}
            </p>
            <button wire:click.prevent="answer(1)" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">Yes</button>
            <button wire:click.prevent="answer(0)" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">No</button>
            <button wire:click.prevent="refresh" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">Refresh</button>
        </div>
    </div>
    
    <!-- Display Result -->
    @if ($result)
    <div class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
        Result: {{ $result }}
    </div>
    @endif
</div>

现在,根据用户的答案,结果将会显示在页面上。如果您有多个结果,可以在answer方法中进一步扩展逻辑,根据不同的问题和答案设置不同的结果。这是一个示例,您可以根据您的需求进行自定义。

英文:

i've been building a dynamic qiestion project, that should give certain questions and answers depending on user's answers(yes or no). Here's code that gives question from table and gives to user. And i wrote it in Livewire

Question controller

 public $currentQuestion = 1;
  public $question;

  public function render()
    {
        $this-&gt;question = $this-&gt;getQuestionId($this-&gt;currentQuestion);
        return view(&#39;livewire.question&#39;);
    }

 public function answer($answer)
    {
        if ($answer == 1) {
            $this-&gt;currentQuestion = $this-&gt;nextYesQuestion($this-&gt;currentQuestion);
        } elseif ($answer == 0) {
            $this-&gt;currentQuestion = $this-&gt;nextNoQuestion($this-&gt;currentQuestion);
        }
    }

 private function getQuestionId($questionNumber)
    {
        $questions = [
            1 =&gt; &#39;Question 1: &#39; . Query::where(&quot;id&quot;, &quot;1&quot;)-&gt;pluck(&#39;question&#39;)-&gt;implode(&quot;&quot;),
            2 =&gt; &#39;Question 2: &#39; . Query::where(&quot;id&quot;, &quot;2&quot;)-&gt;pluck(&#39;question&#39;)-&gt;implode(&quot;&quot;),
            3 =&gt; &#39;Question 3: &#39; . Query::where(&quot;id&quot;, &quot;3&quot;)-&gt;pluck(&#39;question&#39;)-&gt;implode(&quot;&quot;),
            4 =&gt; &#39;Question 4: &#39; . Query::where(&quot;id&quot;, &quot;4&quot;)-&gt;pluck(&#39;question&#39;)-&gt;implode(&quot;&quot;),
            5 =&gt; &#39;Question 5: &#39; . Query::where(&quot;id&quot;, &quot;5&quot;)-&gt;pluck(&#39;question&#39;)-&gt;implode(&quot;&quot;),
            6 =&gt; &#39;Question 6: &#39; . Query::where(&quot;id&quot;, &quot;5&quot;)-&gt;pluck(&#39;question&#39;)-&gt;implode(&quot;&quot;),
            7 =&gt; &#39;Question 7: &#39; . Query::where(&quot;id&quot;, &quot;6&quot;)-&gt;pluck(&#39;question&#39;)-&gt;implode(&quot;&quot;),
        ];

        return $questions[$questionNumber] ?? null;
    }

   private function nextYesQuestion($questionNumber)
    {
        $nextQuestion = [
            1 =&gt; 2,
            2 =&gt; 4,
            3 =&gt; 6,
        ];

        return $nextQuestion[$questionNumber] ?? null;
    }

  private function nextNoQuestion($questionNumber)
    {
        $nextQuestion = [
            1 =&gt; 3,
            2 =&gt; 5,
            3 =&gt; 7,
        ];

        return $nextQuestion[$questionNumber] ?? null;
    }

  public function refresh()
    {
        $this-&gt;currentQuestion = 1;
        $this-&gt;result = null;
    }

 public function previousQuestion()
    {
        unset($this-&gt;answeredQuestions[$this-&gt;currentQuestion]);
        $this-&gt;currentQuestion = $this-&gt;getPreviousQuestion($this-&gt;currentQuestion);
    }

    private function getPreviousQuestion($questionNumber)
    {
        $previousQuestion = null;
        foreach (array_reverse($this-&gt;answeredQuestions, true) as $q =&gt; $answer) {
            if ($q &lt; $questionNumber) {
                $previousQuestion = $q;
                break;
            }
        }
        return $previousQuestion ?? 1;
    }

Question blade file

&lt;div class=&quot;gap-6 lg:gap-8&quot;&gt;
    &lt;!-- 1 question --&gt;
    &lt;div
        class=&quot;scale-100 p-6 bg-white dark:bg-gray-800/50 dark:bg-gradient-to-bl from-gray-700/50 via-transparent dark:ring-1 dark:ring-inset dark:ring-white/5 rounded-lg shadow-2xl shadow-gray-500/20 dark:shadow-none flex motion-safe:hover:scale-[1.01] transition-all duration-250 focus:outline focus:outline-2 focus:outline-red-500&quot;&gt;
        &lt;div&gt;
            &lt;div class=&quot;h-16 w-16 bg-red-50 dark:bg-red-800/20 flex items-center justify-center rounded-full&quot;&gt;
                &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke-width=&quot;1.5&quot;
                     class=&quot;w-7 h-7 stroke-red-500&quot;&gt;
                    &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;
                          d=&quot;M6.115 5.19l.319 1.913A6 6 0 008.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 002.288-4.042 1.087 1.087 0 00-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 01-.98-.314l-.295-.295a1.125 1.125 0 010-1.591l.13-.132a1.125 1.125 0 011.3-.21l.603.302a.809.809 0 001.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 001.528-1.732l.146-.292M6.115 5.19A9 9 0 1017.18 4.64M6.115 5.19A8.965 8.965 0 0112 3c1.929 0 3.716.607 5.18 1.64&quot;/&gt;
                &lt;/svg&gt;
            &lt;/div&gt;

            &lt;h2 class=&quot;mt-6 text-xl font-semibold text-gray-900 dark:text-white&quot;&gt;Question &lt;/h2&gt;

            &lt;p class=&quot;mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed&quot;&gt;
                {{ $question }}
            &lt;/p&gt;
            &lt;button wire:click.prevent=&quot;answer(1)&quot;
                    class=&quot;bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full&quot;&gt;
                Yes
            &lt;/button&gt;
            &lt;button wire:click.prevent=&quot;answer(0)&quot;
                    class=&quot;bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full&quot;&gt;
                No
            &lt;/button&gt;
            &lt;button wire:click.prevent=&quot;refresh&quot;
                    class=&quot;bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full&quot;&gt;
                Refresh
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
&lt;/div&gt;

So the code so far works fine, it give accoring questions dependin on user's answers. But the feature i want to add is result - i coulnt do that. The idea is, for example, user chooses "No" to 7th question and it should pop up result saying "7th question No result", if user chooses yes, it should say "7th question yes question". so how can i do that? Consider that there are many results, and if you could show me around 3-4 results of how can i do that, i would be pleased.

答案1

得分: 1

以下是翻译好的部分:

"Solution: we need to create 2 arrays and 2 functions for that"
"解决方案:我们需要创建2个数组和2个相应的函数"

"public $results = [3 => 0, 6 => 1]; //this array for checking yes or no answer from user"
"public $results = [3 => 0, 6 => 1]; //这个数组用于检查用户的是或否答案"

"public $answers = [3 => "Result for question 3", 6 => "Result for question 6"]; //this array is for answers"
"public $answers = [3 => "问题3的答案", 6 => "问题6的答案"]; //这个数组用于存储答案"

"so now we can add 2 new functions to our backend"
"现在我们可以在后端添加2个新函数"

"public function getKey($questionId)"
"public function getKey($questionId)"

"return $this->results[$questionId];"
"return $this->results[$questionId];"

"public function getAnswer($question)"
"public function getAnswer($question)"

"return $this->answers[$question];"
"return $this->answers[$question];"

"and some new lines to answer function"
"并且在answer函数中添加一些新的行"

"if (Arr::exists($this->results, $this->currentQuestion)) {"
"if (Arr::exists($this->results, $this->currentQuestion)) {"

"if ($answer == $this->getKey($this->currentQuestion)) {"
"if ($answer == $this->getKey($this->currentQuestion)) {"

"$this->result = $this->getAnswer($this->currentQuestion);"
"$this->result = $this->getAnswer($this->currentQuestion);"

"if ($answer == 1) {"
"if ($answer == 1) {"

"$this->currentQuestion = $this->nextYesQuestion($this->currentQuestion);"
"$this->currentQuestion = $this->nextYesQuestion($this->currentQuestion);"

"} elseif ($answer == 0) {"
"} elseif ($answer == 0) {"

"$this->currentQuestion = $this->nextNoQuestion($this->currentQuestion);"
"$this->currentQuestion = $this->nextNoQuestion($this->currentQuestion);"

英文:

So, i've answer by myself, but i think still it needs some changes, cuz for my it looks like it wokrs slow, so pls if you have any suggestion write it in comments.

Solution: we need to create 2 arrays and 2 functions for that

 public $results = [3 =&gt; 0, 6 =&gt; 1]; //this array for checking yes or no answer from user

public $answers = [3 =&gt; &quot;Result for question 3&quot;, 6 =&gt; &quot;Result for question 6&quot;]; //this array is for answers

so now we can add 2 new functions to our backend

 public function getKey($questionId)
 {
    return $this-&gt;results[$questionId];
 }

public function getAnswer($question)
 {
    return $this-&gt;answers[$question];
 }

and some new lines to answer function

 public function answer($answer)
{
    if (Arr::exists($this-&gt;results, $this-&gt;currentQuestion)) {
        if ($answer == $this-&gt;getKey($this-&gt;currentQuestion)) {
            $this-&gt;result = $this-&gt;getAnswer($this-&gt;currentQuestion);
        }
    }

    if ($answer == 1) {
        $this-&gt;currentQuestion = $this-&gt;nextYesQuestion($this-&gt;currentQuestion);
    } elseif ($answer == 0) {
        $this-&gt;currentQuestion = $this-&gt;nextNoQuestion($this-&gt;currentQuestion);
    }
}

huangapple
  • 本文由 发表于 2023年7月11日 00:57:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/76655850.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定