使用 PHP 和 JQuery 滑动问题

Question

我有一个简单的网站，我希望它提出 10 个问题并将答案保存到数据库中。

我希望它具有一点交互性，并且一次只显示一个问题。然后当用户回答该问题时，该 div 向左滑动并显示下一个问题，直到所有问题都被提出，然后页面将答案提交到数据库。答案将保存在用户 IP 地址下。

这就是我设想的工作方式：

Q1：你叫什么名字？

用户输入详细信息（例如托尼），然后按下一步，数据库填充如下：

UserID: 192.168.0.1 QuestionID: 1 Answer: Tony

然后向用户显示问题 2。

你最喜欢的颜色是什么？ 用户回答问题并选择下一步。数据库填充：

UserID: 192.168.0.1 QuestionID: 2 Answer: Blue

最终到达最后一个问题并点击提交。

我可以进行提交等操作，但我正在努力寻找一种方法来实现看起来流畅优雅的多 div 布局。

有什么想法吗？

<div><h1>Question 1: What is your name?</h1></div>
<div><input type="text" name="yourName" class="inputBox" value="" required /></div>

Answer 1

一个使用jquery并显示无类的方法：

JS

function next(this_q, next_q) {
     // SAVE DATA TO DB VIA AJAX ETC...
     $("#q"+this_q).toggleClass("d-none");
     $("#q"+next_q).toggleClass("d-none");
}

HTML

<div id="q1">
     This is question 1?
     <input ... >
     <button onclick="next(1,2);" ... >
</div>
<div id="q2" class="d-none">
     This is question 2?
     <input ... >
     <button onclick="next(2,3);" ... >
</div>
<div id="q3" class="d-none">
     This is question 3?
     <input ... >
     <button onclick="next(3,4);" ... >
</div>
more divs ...

显然缺少样式等，但我会这样做。

点击下一个按钮时：

保存答案 -> 隐藏答案 -> 显示下一个