Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/34.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
初学者坚持做一个html和css测试_Html_Css - Fatal编程技术网

初学者坚持做一个html和css测试

初学者坚持做一个html和css测试,html,css,Html,Css,我一直在努力学习html和css的起源,作为我的第一项任务,我被要求做一个html和css编码的函数测验 我无法从负责这项工作的人那里得到帮助,因为我无法联系到他们,我希望其他人能够给我一些指导和建议,说明我需要做些什么才能使函数正确 我在这方面只做了半天的学习,只有一个关于如何完成任务的powerpoint,但它没有涵盖所有需要完成的事情,也没有涵盖如何使用建议的编码来获得我想要的结果 以下是我的一个问题的html编码: <h2>Question1</h2>

我一直在努力学习html和css的起源,作为我的第一项任务,我被要求做一个html和css编码的函数测验

我无法从负责这项工作的人那里得到帮助,因为我无法联系到他们,我希望其他人能够给我一些指导和建议,说明我需要做些什么才能使函数正确

我在这方面只做了半天的学习,只有一个关于如何完成任务的powerpoint,但它没有涵盖所有需要完成的事情,也没有涵盖如何使用建议的编码来获得我想要的结果

以下是我的一个问题的html编码:

<h2>Question1</h2>
        <h3>Which type of dog would you expect to find on a farm?</h3>
        <p id="OptionOne"><img src="https://www.mybestfrienddogcare.co.uk/wp-content/uploads/2020/02/border-collie-.png"width="150"height="150"><input type="checkbox"></p>
        <p id="OptionTwo"><img src="https://dogtime.com/assets/uploads/gallery/jack-russel-terrier-dog-breed-pictures/2-face.jpg"width="150"height="150"><input type="checkbox"></p>
        <p id="OptionThree"><img src="https://www.pdsa.org.uk/media/6615/german-shepherd-gallery-1-min.jpg?anchor=center&mode=crop&quality=100&height=500&bgcolor=fff&rnd=132019595560000000"width="150"height="150"><input type="checkbox"></p>
        <p id="OptionFour"><img src="https://dogtime.com/assets/uploads/2016/09/beagle-puppy-5-e1568913038666.jpg"width="150"height="150"><input type="checkbox"></p>
问题1
你希望在农场里找到哪种狗?

我只希望每个答案中有一个答案是可选的,我总共有5个问题要做,无法让单选按钮功能在整个测验中发挥作用,因此选择了复选框

我假设能够为所有5个问题选择一个答案,然后单击链接查看答案,然后在下一页显示所有正确答案,以及显示正确回答的问题数量

在此之前,我从未使用过这两种编码,因此非常感谢您的帮助和解释

非常感谢,,
Laufeena

您需要使用相同的
名称对无线电输入进行分组
,以获得所需的功能,例如:

<input type="radio" name="q1">
<input type="radio" name="q1">
<input type="radio" name="q1">

<input type="radio" name="q2">
<input type="radio" name="q2">
<input type="radio" name="q2">


在这里,您只能从q1中选择1个选项,从q2中选择1个选项。

假设第一个问题的答案是dog one,那么这里是用JavaScript和CSS重写的HTML,以包含所需的基本功能

现在,您需要在整个测验中尝试并复制此内容

const$form=document.getElementById('form')
const$dogOne=document.getElementById('dog-one'))
const$results=document.getElementById('results'))
$form.addEventListener('submit',(evt)=>{
evt.preventDefault()
如果($dogOne.checked){
$results.innerHTML='

正确!

' }否则{ $results.innerHTML='

否。正确答案是dog 1

' } })
*{
字体系列:无衬线;
字体大小:400;
}
.成功{
颜色:海绿;
}
.失败{
颜色:印度红;
}
问题1
你希望在农场里找到哪种狗?




提交
感谢您解释如何在所有问题中使用无线电功能,我将立即实施。我已成功地将所有问题正确设置,每个问题只有一个答案,因此感谢您。我并不是想找出如何将所选问题相加,以在“查看答案”页面上显示某人的总分,是否有一种特殊类型的代码来执行此操作?非常感谢您向我展示这一点,我现在正试图复制代码以获得相同的效果。这非常有帮助!你好,雅利安,我正在努力将JavaScript实现到我的代码中。我正在使用VisualStudio代码。如前所述,我刚刚开始学习HTML和CSS,我知道要使用JavaScript,我需要使用jsconfig.json,但有些代码没有注册。这可能是因为我正在使用的程序吗?还是我遗漏了更多的东西?@Laufeena这是一个没有框架的简单HTML/CSS项目吗?我相信是的。最终的结果是,我应该使用我的html链接到一个答案页面来显示答案,同时也显示有多少答案是正确的。我很高兴学习JavaScript,因为Java是我非常感兴趣的编码语言之一,但我不相信在这项任务中必须使用它。@Laufeena JavaScript实际上与Java无关。JavaScript(又名JS)创建它是为了向网站添加前端功能,而仅仅使用HTML和CSS是不可能的。要将JavaScript添加到HTML文件,不需要jsconfig.json文件或任何配置文件。只需在根目录中创建该文件,将其命名为
script.js
,并在HTML文件末尾的结束标记前面导入它,并使用