DMOZ中文网站分类目录-免费收录各类优秀网站的中文网站目录.
  • DmozDir.org
DMOZ目录快速登录入口-免费收录各类优秀网站的中文网站目录.由人工编辑,并提供网站分类目录检索及地区分类目录检索,是站长免费推广网站的有力平台!

如何做一个简单的JavaScript测验

  • 如何做一个简单的JavaScript测验

  • 已被浏览: 73 次2020年10月14日    来源:  DMOZ中文网站分类目录
  • Yaphi和詹姆斯步行通过自己制作简单的JavaScript测试。这是一个有趣的锻炼和学习各种编码技术的一个很好的方式。

    “我如何做一个JavaScript测验?”是最常见的问题之一,要求人们学习网络的发展,并有很好的理由。竞猜的乐趣!他们学习新学科的一个伟大的方式,他们让你搞的东西有趣和好玩你的听众。

    这种流行的文章在2020年更新,以反映在JavaScript中目前的最佳做法。为了更深入的JavaScript知识,请阅读我们的书,JavaScript的:新手忍者,第2版。

    How to Make a JavaScript Quiz

    编码自己的JavaScript测验也是一个奇妙的学习锻炼。它教你如何处理事件,操作DOM,处理用户输入,反馈给用户,并跟踪他们的分数(例如,使用客户端存储)。而当你有一个基本的测验和运行,也有可能性一大堆添加更多先进的功能,如分页。我进入这个在文章的结尾。

    在本教程中,我将向你,尽管创建一个多步骤的JavaScript测验,你就可以适应您的需求,并添加到您自己的网站。如果你想看到什么,我们将与即将结束,你可以跳到看到工作测验。

    事情需要注意开始之前的

    有几件事情在开始前就知道了:

    这是一个前端的教程,这意味着任何人谁知道如何通过看页面的源代码中可以找到答案。对于严重的测验,数据需要通过后端,这已经超出了本文的范围进行处理。

    本文中的代码使用现代JavaScript语法(ES6 +),这意味着它不会与Internet Explorer的任何版本兼容。然而,它完全可以在现代浏览器,包括微软边缘就好了。

    如果您需要支持旧的浏览器,我已经写了一个JavaScript测验教程的兼容回IE8。或者,如果您想在ES6复习,看看这门课程由达林Haener在上SitePoint保费。

    你需要一些熟悉HTML,CSS和JavaScript,但每一行代码将被单独说明。

    目前JavaScript测验的基本结构

    理想情况下,我们要测验的问题和答案,在我们的JavaScript代码,并有我们的脚本自动生成测验。这样,我们就不需要写很多重复的标记,我们可以很容易地添加和删除的问题。

    要建立我们的JavaScript测验的结构,我们需要先从以下HTML:

    A <代码>

    保持测验

    A <代码> <按钮> 提交测验

    A <代码>

    以显示结果

    以下是如何将看:

    <预的tabindex = “0” 类= “语言的标记 ”> <代码类=“ 标记语言的标记 ”>

    <按钮ID = “提交”>提交测验

    然后,我们可以选择像这样的变量,这些HTML元素和存储对它们的引用:

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”>常量quizContainer =的document.getElementById( "测验");

    常量resultsContainer =的document.getElementById( "结果");

    常量提交按钮=的document.getElementById( "提交");

    下一步,我们将需要一种方法来建立一个测验,结果显示,并把它放在一起。我们可以通过布置我们的函数开始,我们会在,因为我们去填补他们:

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”>功能buildQuiz(){}

    功能showResults(){}

    //显示测验马上

    buildQuiz();

    //上提交,展示成果

    submitButton.addEventListener( "点击",showResults);

    在这里,我们具备的功能打造的测验,显示结果。我们会立即运行我们的 buildQuiz 函数,我们将有我们的 showResults 当用户点击提交按钮功能运行。

    显示测验问题

    我们的测试需要接下来的事情是一些问题显示。我们将使用对象常量来表示个别问题和一个数组来保存所有这一切构成了我们的测试问题。使用数组将会使问题容易遍历:

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”>常量myQuestions = [

    {

    问题: “是谁发明的JavaScript?”,

    答案:{

    答: “道格拉斯Crockford的”,

    B:“桑德伯格”

    C:“布兰登·艾克”

    },

    correctAnswer: “C”

    },

    {

    问题:“其中哪一个是一个JavaScript包管理器?”,

    答案:{

    答: “Node.js的”,

    B:“打字稿”

    C: “故宫”

    },

    correctAnswer: “C”

    },

    {

    问题:“您可以使用哪些工具,以确保代码质量?”

    答案:{

    一:“角”,

    B: “jQuery的”,

    C: “RequireJS”

    d: “ESLint”

    },

    correctAnswer: “d”

    }

    ]。

    随意把尽可能多的问题或答案,只要你想。

    注意:因为这是一个数组,该问题会出现在他们列出的顺序。如果你想将它们呈现给用户之前以任何方式问题进行排序,看看我们的快速提示上的排序,我们有我们的问题清单中JavaScript.Now对象的数组,就可以显示在网页上。我们会去通过线以下的JavaScript线,看看它是如何工作的:

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”>功能buildQuiz(){

    //变量来存储HTML输出

    常量输出= [];

    //为每个问题...

    myQuestions.forEach(

    (currentQuestion,questionNumber)=> {

    //变量来存储可能的答案列表

    常量答案= [];

    //并为每个可用的答案...

    对(在currentQuestion.answers字母){

    // ...添加HTML单选按钮

    answers.push(

    `<标签>

    $ {}的信:

    $ {currentQuestion.answers [信]}

    `

    );

    }

    //添加这个问题,它的答案,输出

    output.push(

    ` $ {currentQuestion.question}

    $ {answers.join( "")} "

    );

    }

    );

    //最后结合我们的输出列表到HTML的一个字符串,并把它放在网页上

    quizContainer.innerHTML = output.join( "");

    }

    首先,我们创建一个<代码>输出的变量包含所有的HTML输出包括提问和回答的选择。

    接下来,我们就可以开始建立每个问题的HTML。我们将通过像这样每个问题需要循环:

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”> myQuestions.forEach((currentQuestion,questionNumber)=> {

    //我们要对每个问题运行的代码放在这里

    });

    为了简便起见,我们使用一个箭头的函数,在每个问题进行我们的业务。因为这是在foreach循环,我们得到的电流值,该指数(在阵列中的当前项的位置编号),并且阵列本身作为参数。我们只需要分别当前值和指标,这对于我们的目的,我们将其命名为<代码> currentQuestion 和<代码> questionNumber

    现在,让我们来看看我们的循环里面的代码:

    <前的tabindex =“0”级=“语言的JavaScript‘> <代码类=’JavaScript语言的JavaScript”> //我们将要存储的答案选项列表

    常量答案= [];

    //并为每个可用的答案...

    对(在currentQuestion.answers字母){

    // ...添加HTML单选按钮

    answers.push(

    `<标签>

    $ {}的信:

    $ {currentQuestion.answers [信]}

    `

    );

    }

    //添加这个问题,它的答案,输出

    output.push(

    ` $ {currentQuestion.question}

    $ {answers.join( "")} "

    );

    对于每一个问题,我们将要生成正确的HTML,所以我们的第一步是创建一个数组来保存可能的答案列表。

    接下来,我们将使用一个循环来填补当前问题可能的答案。对于每个选择,我们创建一个HTML单选按钮,这是我们在<代码>括<标签> 元素。这是为了让用户能够在任何地方点击答复文件来选择答案。如果省略了标签,那么用户必须点击单选按钮本身,这是不是很接近。

    请注意,我们使用模板文字,这是字符串但功能更强大。我们将利用以下功能:

    多线功能

    没有更多的是因为模板文字使用反引号,而不必逃避引号内报价

    串插,这样你就可以嵌入JavaScript表达式直接进入你的字符串是这样的:<代码> $ {code_goes_here}

    一旦我们得到我们的答复按钮的列表,我们可以把这个问题HTML和答案HTML到我们整体的输出列表。

    请注意,我们使用模板文字和一些嵌入式表达式来首先创建问题的div,然后创建答案股利。在加入的表达一起发生在一个字符串,我们的答案,并把他们的名单,我们可以输出到我们的答案 DIV。

    现在我们已经生成了每个问题的HTML,我们可以加入它一起,并显示在页面上:

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”> quizContainer.innerHTML = output.join( "");

    现在我们的<代码> buildQuiz 函数完成。

    你应该能够在这一点上运行测验,看看问题显示出来。请注意,但是,你的代码的结构是很重要的。由于一种叫做颞死区,已被定义之前,你不能引用您的问题阵列。

    总括来说,这是正确的结构:

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”> // Functionsfunction buildQuiz(){...}

    功能showResults(){...}

    //变量

    常量quizContainer =的document.getElementById( "测验");

    常量resultsContainer =的document.getElementById( "结果");

    常量提交按钮=的document.getElementById( "提交");

    常量myQuestions = [...];

    //踢东西了

    buildQuiz();

    //事件监听器

    submitButton.addEventListener( "点击",showResults);

    显示测验结果

    在这一点上,我们要建立我们的<代码> showResults 函数遍历所有的答案,检查它们,并显示结果。

    这里的功能,我们将详细经过未来:

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”>功能showResults(){

    //从我们的测试收集容器的答案

    常量answerContainers = quizContainer.querySelectorAll(”答案。);

    //用户的答案跟踪

    让numCorrect = 0;

    //为每个问题...

    myQuestions.forEach((currentQuestion,questionNumber)=> {

    //找到选择的答案

    常量answerContainer = answerContainers [questionNumber];

    常量选择=`输入[名称=问题$ {questionNumber}]:checked`;

    。常量userAnswer =(answerContainer.querySelector(选择器)|| {})值;

    //如果答案是正确的

    如果(userAnswer === currentQuestion.correctAnswer){

    //添加到正确答案的数目

    numCorrect ++;

    //颜色答案绿

    answerContainers [questionNumber] .style.color = "浅绿";

    }

    //如果答案是错误或空白

    其他{

    //颜色答案红

    answerContainers [questionNumber] .style.color = "红";

    }

    });

    //显示正确答案的数出共有

    resultsContainer.innerHTML =`$ {numCorrect}出的$ {myQuestions.length}`;

    }

    首先,我们选择在我们的测试的HTML所有的答案容器。然后,我们将创建变量来跟踪用户当前的答案和正确答案的总数。

    <预的tabindex =“0”类=“语言的javascript‘> <代码类=’JavaScript语言的JavaScript”> //收集答案集装箱从我们的测验

    常量answerContainers = quizContainer.querySelectorAll(”答案。);

    //用户的答案跟踪

    让numCorrect = 0;

    现在,我们可以遍历每个问题,并核对答案。

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”> //为每个问题...

    myQuestions.forEach((currentQuestion,questionNumber)=> {

    //找到选择的答案

    常量answerContainer = answerContainers [questionNumber];

    常量选择=`输入[名称=问题$ {questionNumber}]:checked`;

    。常量userAnswer =(answerContainer.querySelector(选择器)|| {})值;

    //如果答案是正确的

    如果(userAnswer === currentQuestion.correctAnswer){

    //添加到正确答案的数目

    numCorrect ++;

    //颜色答案绿

    answerContainers [questionNumber] .style.color = "浅绿";

    }

    //如果答案是错误或空白

    其他{

    //颜色答案红

    answerContainers [questionNumber] .style.color = "红";

    }

    });

    这段代码的一般要点是:

    发现在HTML所选答案

    手柄如果答案是正确的会发生什么

    句柄,如果回答错了会发生什么。

    让我们来看看更密切地关注我们如何找到我们HTML选择的答案:

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”> //找到选择的答案

    常量answerContainer = answerContainers [questionNumber];

    常量选择=`输入[名称=问题$ {questionNumber}]:checked`;

    。常量userAnswer =(answerContainer.querySelector(选择器)|| {})值;

    首先,我们要确保我们正在寻找当前问题的答案容器内。

    下一行,我们定义一个CSS选择器,可以让我们找到哪个单选按钮被选中。

    然后,我们使用的JavaScript的 querySelector 在以前定义的 answerContainer 的搜索我们的CSS选择器。从本质上说,这意味着,我们会发现这答案的单选按钮被选中。

    最后,我们可以使用<代码> .value的获取答案的价值。

    不完全用户输入处理

    但是,如果用户离开一个答案的空白?在这种情况下,使用<代码> .value的将导致一个错误,因为你不能得到的东西是不存在的价值。为了解决这个问题,我们已经添加<代码> || ,它的意思是“或”,和 {} ,它是一个空对象。现在整体的声明说:

    获取参考我们选择的答案元素,或者,如果不存在,用一个空对象。

    获得的一切是在第一语句中的值。

    其结果是,该值将或者是用户的答案或<代码>未定义的,这意味着用户可以跳过一个问题没有崩溃我们的测验。

    评价答案并显示结果

    在我们的答案检查循环中的下一个语句可以让我们处理正确和不正确的答案。

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”> //如果答案是correctif(userAnswer === currentQuestion.correctAnswer){

    //添加到正确答案的数目

    numCorrect ++;

    //颜色答案绿

    answerContainers [questionNumber] .style.color = "浅绿";

    }

    //如果答案是错误或空白

    其他{

    //颜色答案红

    answerContainers [questionNumber] .style.color = "红";

    }

    如果用户的答案正确的选择相匹配,由一个和(可选)颜色增加正确答案的数量组选择绿色。如果答案是错误或空白,颜色答案选择红色(再次,可选)。

    一旦答案检查循环结束后,我们就可以向用户显示多少问题得到正确的:

    <预的tabindex =“0”类=“语言的javascript‘> <代码类=’JavaScript语言的JavaScript”>正确答案出总的//节目数

    resultsContainer.innerHTML =`$ {numCorrect}出的$ {myQuestions.length}`;

    现在我们有一个工作的JavaScript测验!

    如果你愿意,你可以用在IIFE(立即调用函数表达式),这是一个运行,只要你把它定义一个函数整个测验。这将让你的变量进行全球范围内的,并确保您的测验不与网页上运行的任何其他脚本冲突。

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”>(函数(){

    //把你的代码的其余部分在这里

    })();

    现在,你所有的设置!随意像添加或删除然而问题和答案和风格测验你。

    在这一点上,你的测验可能是这样的(与造型的一点点):

    见笔

    简单的JavaScript测验(无分页)由SitePoint(@SitePoint)

    上CodePen。

    添加分页

    现在,我们有我们的基本测验运行,让我们来看看一些更先进的功能。例如,假设你想显示在同一时间只有一个问题。

    你需要:

    一种方法来显示和隐藏的问题

    按钮导航测验。

    我们需要做一些更新,让我们用HTML开始:

    <预的tabindex =“0”类=“语言的标记‘> <代码类=’标记语言的标记‘>

    <按钮ID = “以前”>前一题

    <按钮ID = “下一个”>下一步问题

    <按钮ID = “提交”>提交测验

    大多数标记的是和以前一样,但现在我们已经添加了导航按钮和一个测验容器。测验容器将帮助我们定位问题,如层,我们可以显示和隐藏。

    接下来,在里面buildQuiz 函数,我们需要添加一个<代码>

    的带班<代码>幻灯片举行答问容器元素,我们只是创建:

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”> output.push(

    `

    $ {currentQuestion.question}

    $ {answers.join( “”)}

    "

    );

    接下来,我们可以用一些CSS定位,使幻灯片坐作为彼此的顶层。在这个例子中,你会发现我们使用Z-指数和透明度转变,让我们的幻灯片淡入和淡出。下面是CSS可能是什么样子:

    <预的tabindex = “0” 类= “语言-CSS ”> <代码类=“ CSS语言-CSS”>滑动{

    位置:绝对的;

    左:0像素;

    顶:0像素;

    宽度:100%;

    的z-index:1;

    不透明度:0;

    过渡:不透明度为0.5s;

    }

    。主动滑块{

    不透明度:1;

    的z-index:2;

    }

    .quiz容器{

    位置:相对;

    高度:200像素;

    边距:40像素;

    }

    现在,我们将添加一些JavaScript,使拼版作业。和以前一样,顺序很重要,所以这是我们的代码修改后的结构:

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”> //函数

    //新功能去这里

    //变量

    //相同的代码之前

    //踢东西了

    buildQuiz();

    //分页

    //这里新的代码

    //显示第一张幻灯片

    showSlide(currentSlide);

    //事件监听器

    //新的事件监听器在这里

    我们可以用一些变量来存储引用到我们的导航按钮启动和跟踪哪些滑动我们上。调用<代码> buildQuiz(),如图上述后添加这些:

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”> //分页

    常量previousButton =的document.getElementById( “前”);

    常量Next按钮=的document.getElementById( “下一个”);

    常量幻灯片= document.querySelectorAll( “滑动”);

    让currentSlide = 0;

    接下来,我们将编写一个函数来显示的幻灯片。添加此现有功能的下方(<码> buildQuiz showResults ):

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”>功能showSlide(N){载玻片[currentSlide] .classList.remove( "有源滑动");

    幻灯片[n]的.classList.add( "有源滑动");

    currentSlide = N;

    如果(currentSlide === 0){

    previousButton.style.display = "无";

    }

    其他{

    previousButton.style.display =“内联块”;

    }

    如果(currentSlide === slides.length-1){

    nextButton.style.display = "无";

    submitButton.style.display =“内联块”;

    }

    其他{

    nextButton.style.display =“内联块”;

    submitButton.style.display = "无";

    }

    }

    下面介绍一下前三行做:

    隐藏通过去除<代码>有源滑动类当前幻灯片。

    示出了通过添加<代码>有源滑动类新的幻灯片。

    更新当前的幻灯片编号。

    下一行介绍以下逻辑:

    如果我们在第一张幻灯片,隐藏的上一张幻灯片按钮。否则,显示的按钮。

    如果我们在最后一张幻灯片,隐藏下一张幻灯片按钮,并显示提交按钮。否则,显示下一张幻灯片按钮,隐藏提交按钮。

    我们已经写我们的功能后,就可以马上拨打<代码> showSlide(0)显示第一张幻灯片。这应该是分页代码之后:

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”> //分页

    ...

    showSlide(currentSlide);

    接下来,我们可以写功能,使导航按钮的工作。这些走在下面showSlide 功能:

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”>功能showNextSlide(){

    showSlide(currentSlide + 1);

    }

    功能showPreviousSlide(){

    showSlide(currentSlide - 1);

    }

    在这里,我们正在利用我们的 showSlide 函数,让我们的导航按钮,显示上一张幻灯片和下一张幻灯片。

    最后,我们需要挂钩的导航按钮多达这些功能。这是以代码的结尾:

    <预的tabindex = “0” 类= “语言的javascript ”> <代码类=“ JavaScript语言的JavaScript”> //事件侦听

    ...

    previousButton.addEventListener( “点击”,showPreviousSlide);

    nextButton.addEventListener( “点击”,showNextSlide);

    现在你已经测验工作导航!

    见笔

    简单的JavaScript测验采用分页由SitePoint(@SitePoint)

    上CodePen。

    下一步是什么?

    现在,你有一个基本的JavaScript测验,它的时间去创作和实验。

    这里有一些建议你可以试试:

    试着回答正确答案或错误答案的不同方式。

    很好风格测验。

    添加一个进度条。

    让用户在提交前检查答案。

    为用户提供他们的答案的总结,他们提交后。

    更新导航,让用户跳过任何问题数量。

    对于结果的每个级别创建自定义的消息。例如,如果某人的分数8/10或更高,叫他们测验忍者。

    添加一个按钮来分享成果,以社会化媒体。

    保存您的高分使用本地存储。

    添加一个倒数计时器,看看人们能够击败时钟。

    应用从本文用于其他用途,这些概念如项目的价格估计,或社会“的字符 - 是 - 你”测验。


    以上信息来源于网络,如有侵权,请联系站长删除。

    TAG:简单 JavaScript中 测验

  • 上一篇:顶部2020的WordPress插件增压您的网站
  • 与“如何做一个简单的JavaScript测验”相关的资讯
  • 8个简单的YouTube SEO提示,在搜索中将您的视频排名更高
  • ZooKeeper学习笔记三:使用ZooKeeper实现一个简单的配置中心
  • 重新整理 .net core 实践篇—————配置系统之简单配置中心[十一]
  • 通过Dapr实现一个简单的基于.net的微服务电商系统(十五)——集中式接口文档实现
  • 有趣的css—简单的下雨效果2.0版