英文:
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->question = $this->getQuestionId($this->currentQuestion);
return view('livewire.question');
}
public function answer($answer)
{
if ($answer == 1) {
$this->currentQuestion = $this->nextYesQuestion($this->currentQuestion);
} elseif ($answer == 0) {
$this->currentQuestion = $this->nextNoQuestion($this->currentQuestion);
}
}
private function getQuestionId($questionNumber)
{
$questions = [
1 => 'Question 1: ' . Query::where("id", "1")->pluck('question')->implode(""),
2 => 'Question 2: ' . Query::where("id", "2")->pluck('question')->implode(""),
3 => 'Question 3: ' . Query::where("id", "3")->pluck('question')->implode(""),
4 => 'Question 4: ' . Query::where("id", "4")->pluck('question')->implode(""),
5 => 'Question 5: ' . Query::where("id", "5")->pluck('question')->implode(""),
6 => 'Question 6: ' . Query::where("id", "5")->pluck('question')->implode(""),
7 => 'Question 7: ' . Query::where("id", "6")->pluck('question')->implode(""),
];
return $questions[$questionNumber] ?? null;
}
private function nextYesQuestion($questionNumber)
{
$nextQuestion = [
1 => 2,
2 => 4,
3 => 6,
];
return $nextQuestion[$questionNumber] ?? null;
}
private function nextNoQuestion($questionNumber)
{
$nextQuestion = [
1 => 3,
2 => 5,
3 => 7,
];
return $nextQuestion[$questionNumber] ?? null;
}
public function refresh()
{
$this->currentQuestion = 1;
$this->result = null;
}
public function previousQuestion()
{
unset($this->answeredQuestions[$this->currentQuestion]);
$this->currentQuestion = $this->getPreviousQuestion($this->currentQuestion);
}
private function getPreviousQuestion($questionNumber)
{
$previousQuestion = null;
foreach (array_reverse($this->answeredQuestions, true) as $q => $answer) {
if ($q < $questionNumber) {
$previousQuestion = $q;
break;
}
}
return $previousQuestion ?? 1;
}
Question
blade file
<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>
</div>
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 => 0, 6 => 1]; //this array for checking yes or no answer from user
public $answers = [3 => "Result for question 3", 6 => "Result for question 6"]; //this array is for answers
so now we can add 2 new functions to our backend
public function getKey($questionId)
{
return $this->results[$questionId];
}
public function getAnswer($question)
{
return $this->answers[$question];
}
and some new lines to answer
function
public function answer($answer)
{
if (Arr::exists($this->results, $this->currentQuestion)) {
if ($answer == $this->getKey($this->currentQuestion)) {
$this->result = $this->getAnswer($this->currentQuestion);
}
}
if ($answer == 1) {
$this->currentQuestion = $this->nextYesQuestion($this->currentQuestion);
} elseif ($answer == 0) {
$this->currentQuestion = $this->nextNoQuestion($this->currentQuestion);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论