Aplicativo de questionário dinâmico JavaScript do Scratch JSON AJAX | Laurence Svekis | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Aplicativo de questionário dinâmico JavaScript do Scratch JSON AJAX

teacher avatar Laurence Svekis, Best Selling Course Instructor

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

19 aulas (2 h 2 min)
    • 1. Jsquiznew

      2:22
    • 2. 1 Introdução à construção de uma aplicação web dinâmica do zero

      3:06
    • 3. Configuração e ferramentas de 2 cursos

      5:59
    • 4. 3 objetos JavaScript

      4:12
    • 5. 4 Criar arquivo JSON de matriz de objetos

      6:31
    • 6. 5 Dados de análise JSON em JavaScript de objetos

      5:00
    • 7. 7 Use AJAX para obter dados JSON em objeto JavaScript

      10:06
    • 8. 9 visualizações de perguntas de compilação em HTML

      8:54
    • 9. Estilo de 10 Bootstrap do questionário

      10:46
    • 10. 11 Mover-se entre perguntas

      8:28
    • 11. 12 addEventListener

      5:06
    • 12. Verificação de valor de 13 innerText

      3:49
    • 13. 14 Como selecionar CLASES Alternando cursos em elementos

      8:06
    • 14. 15 Seleção de Salvar

      4:33
    • 15. 16 Movimento entre questões conclusão do questionário

      8:17
    • 16. 17 Quiz dinâmico adicionar novas perguntas

      5:43
    • 17. 18 Esconder a exibição de botões próximos e anteriores

      6:04
    • 18. 19 Crie cartão de pontuação para questionário

      10:29
    • 19. Quiz dinâmico JavaScript do projeto 20 finalizar o risco

      4:45
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

326

Estudantes

1

Projeto

Sobre este curso

Guia passo a passo para criar um questionário JavaScript dinâmico baseado na Web que usa um arquivo de origem de dados JSON para gerar um questionário

Aprenda a criar seu próprio questionário dinâmico de JavaScript a partir do risco.

Este curso abrange uma abordagem passo a passo para criar um questionário on-line interativo O projeto concluído é um questionário da Web que é gerado a partir de um arquivo de dados. O código-fonte está incluído para que você também possa experimentar o código para si mesmo, ajustar e criar sua própria versão.

Os testes on-line são uma ferramenta útil para sites e para criar interação, adicionar engajamento e coletar informações dos usuários. Você vai se admirar de como é fácil criar aplicativos como esses do zero. Adicione suas perguntas facilmente. Os dados de questionário são de um arquivo JSON que é puxado para o JavaScript via AJAX. O código JavaScript então gera a saída visual no HTML.

O curso abrange tudo o que você precisa saber, com código fonte incluído. Processo passo a passo, cobrindo tudo o que você precisa saber para poder utilizar todos esses recursos incríveis do JavaScript.

  • Saiba mais sobre objetos JavaScript e como eles podem ser usados para manter dados
  • Saiba mais sobre o JSON e como ele se relaciona com objetos JavaScript
  • Use AJAX para obter dados de um arquivo da Web e, em seguida, analisá-los para um formato de objeto utilizável dentro do seu JavaScript.
  • Como adicionar Bootstrap para estilo rápido na sua página

Como criar um projeto a partir do zero explicado passo a passo. O que torna este curso diferente é que ele leva uma abordagem baseada em projeto para ensinar JavaScript. Veja como e por que código no JavaScript é usado para criar PROJETOS DO MUNDO REAL.

  • Como criar o arquivo de dados de pergunta
  • navegação entre perguntas usando JavaScript
  • adicionar ouvintes de evento para acionar a funcionalidade iniciada pelo usuário
  • trabalhando com o DOM - Modelo de objeto documento
  • Aulas dinâmicas
  • Como adicionar nova pergunta
  • Crie um cartão de pontuação final para o usuário mostrar seus resultados
  • e muito mais...

Comece a explorar o que você pode fazer com JavaScript

No final do curso, você vai ter as habilidades e saber como criar código JavaScript para fazer testes online.

Estou aqui para ajudar você a aprender a criar seus próprios projetos web e pronto para responder a quaisquer perguntas que você possa ter.

Quer saber mais, o que você está esperando dar o primeiro passo. Junte-se agora para começar a aprender como você também pode criar projetos web dinâmicos e interativos hoje.

Conheça seu professor

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Professor

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Jsquiznew: Este curso aborda uma abordagem passo a passo para criar um questionário online interativo. O projeto concluído é um teste da Web que é gerado a partir de um arquivo de dados. O código-fonte está incluído para que você também possa tentar o código por si mesmo. Ajustar e criar sua própria versão em meus testes são ferramentas úteis para sites criar interação, engajamento de anúncios e coletar informações de usuários. Você vai se surpreender com o quão fácil é criar aplicativos como este do zero. Adicione suas próprias perguntas realmente facilmente questionários. Dynamic Quiz Data é de um arquivo Jason que é puxado para o seu código JavaScript através do código JavaScript Ajax que gera a saída visual dentro do curso HTML abrange tudo que você precisa saber com o código-fonte incluído um processo passo a passo cobrindo todos os conceitos fundamentais. Para construir este teste a partir do zero, vamos utilizar incríveis recursos JavaScript. Saiba mais sobre objetos JavaScript e como eles podem ser usados para armazenar dados. Saiba mais sobre Jason e como usar Jason e como ele se relaciona com JavaScript. Objetos usam Ajax para obter esses dados de um arquivo esquerdo e, em seguida, parson em formato de objeto útil dentro do JavaScript. Além disso, vamos estar olhando para como botas de dedo cair muito rápido estilo dentro de sua página da Web. Como construir um projeto a partir do zero explicado passo a passo. O que torna este curso diferente é que ele leva uma abordagem de aprendizagem baseada em projeto, ensino JavaScript ver como e por que as questões Cordon JavaScript é um projeto do mundo real. Como criar um arquivo de dados de pergunta Navegue entre perguntas usando JavaScript adicionando ouvintes de eventos a gatilhos iniciados pelo usuário para obter funcionalidade dinâmica adicional. Trabalhando com o amanhecer, que é um modelo de objeto de documento classes dinâmicas adicionando novas perguntas, criando um scorecard final para que os usuários possam ver seus resultados e muito mais. Comece a explorar o que você pode fazer com JavaScript hoje mesmo. No final do curso, você terá as habilidades e saberá como criar código JavaScript para fazer testes on-line. Estou aqui para ajudá-lo a aprender a criar seus próprios projetos Web e pronto para responder a quaisquer perguntas que você queira saber mais. O que você está esperando? Dê o primeiro passo, junte-se agora e comece a aprender como transmitir projetos dinâmicos interativos da Web hoje mesmo 2. 1 Introdução à construção de uma aplicação web dinâmica do zero: oi lá, e bem-vindo à construção de um aplicativo JavaScript dinâmico a partir do zero. Dentro deste curso, vou mostrar-lhe como você também, pode construir sua própria aplicação web. E neste caso, vamos construir um teste dinâmico na Web. E eu vou mostrar a vocês como construir isso do zero, passo a passo com um processo e lições fáceis de seguir. Meu nome é Lawrence, e serei seu instrutor para este curso. E eu estou tão animado para ter a oportunidade de apresentar todas essas incríveis funcionalidades javascript . Vou mostrar como todos eles trabalham juntos e como você pode juntá-los a fim de construir seus próprios aplicativos exatamente como este. Então vamos passar por como podemos estilizar e criar nosso modelo HTML, adicionando, em algum estilo, também vamos usar bootstrap para algum estilo adicional. Então, isso é nos dar a capacidade de construir nossa aplicação mais rapidamente. E como você pode ver aqui, realmente não há muito conteúdo dentro do HTML. E, claro, há um pouco de estilo apenas para torná-lo um pouco melhor. E dentro do JavaScript, claro, que é onde todo o trabalho pesado vai ser feito para construir este aplicativo e o curso vai ser focado em construir um aplicativo JavaScript . Então a idéia aqui é que vamos usar um arquivo de dados. Então este é um arquivo de dados acessível pela Web. Aqui está um exemplo de um dos arquivos que podemos vincular, e ele é formatado para que possamos utilizá-lo em nosso questionário. Então eu tenho esse teste aqui sobre a caneta de código também. E podemos ver que sempre que atualizo o código ou a fonte de dados, desde que o formato dos dados esteja dentro desse mesmo formato, vemos que as perguntas do questionário podem mudar. E, claro, podemos mudar as respostas e assim por diante. Então, tudo o que precisamos fazer para construir o questionário neste momento é fornecer um arquivo de dados compatível usando um Jason para não isso, em seguida, é puxado para o nosso aplicativo JavaScript e utilizado em javascript, a fim construir dinamicamente o que você vê aqui como o questionário que está sendo apresentado ao usuário e a coisa sobre este aplicativo JavaScript. Vamos puxar isto. Estamos puxando o conteúdo usando o Ajax. Nós também vamos estar usando um site chamado meu Jason dot com, a fim de hospedar nossos arquivos Jason , a fim de realmente mostrar a você as capacidades dinâmicas de construir esses tipos de aplicativos e tudo isso vai ser feito do zero. Então também, ao longo das lições, vou orientá-los sobre como podemos criar diferentes variações do casaco também e apenas todas as coisas diferentes que podem ser feitas com este casaco. Então eu também encorajo você a experimentá-lo por si mesmo, verificar o código-fonte e tentar por si mesmo e ver o que você pode fazer acontecer com JavaScript. Então, quando você estiver pronto, vamos começar a criar nossa aplicação web dinâmica. 3. Configuração e ferramentas de 2 cursos: Bem-vindo ao nosso curso de construção de quiz JavaScript. Dentro deste curso, alguns dos recursos que vou usar e utilizar dentro deste curso serão bootstrap. Então o que bootstrapped faz é que é ah, framework front-end. É um dos mais populares lá fora. Ele permite que você crie sites responsivos de forma rápida e fácil. E eu vou realmente apenas copiá-lo o Cdn aqui para que você possa obter isso sobre na inicialização, obter bootstrap começando. E o que o Cdn faz é que me permite vincular Teoh arquivo CSS vivo, que será esta versão do bootstrap. E então agora eu posso rapidamente e facilmente realmente chamar em algumas das botas, caiu classes no meu projeto Web e utilizá-los para que ele realmente me permite ter estilo rápido em meu projeto. Então, outro que eu estou usando, que eu tinha acabado de abrir. Então isso vai ser colchetes de adobe. Este é um editor de texto de código aberto. É da Adobe. É de uso gratuito. Então, se você já não tem seu editor favorito configurado, você pode conferir colchetes e tentar por si mesmo. Alguns dos outros recursos é que eu estou usando dentro deste curso vão ser caneta código. Eu vou e isso me permite escrever código aqui no lado esquerdo e tê-lo exibido imediatamente no lado direito dentro da área de exibição. E também mesmo quando eu aplicar estilo. Então, se eu fizer algo muito rápido aqui onde eu apenas atualizar a cor para vermelho, nós vemos imediatamente sem ser ter que passar por cima e salvar que ele atualiza a área de exibição. Portanto, esta é uma ferramenta realmente útil para demonstrar como funciona o tribunal e também para ser capaz de praticar código. Então eu vou estar fazendo parte do conteúdo do curso dentro da caneta de código também, e outro recurso começando a ser usado. Então vou usar o meu Jason Dot com. E o que isso me permite fazer é armazenar dados do Jason em um site. Então, quando eu digo que ele me dá a capacidade de apenas acessar este arquivo Jason Data e trazer isso para a minha aplicação. E os benefícios disso são que eu posso dizer que Jason File e Jason é um arquivo de notação de objeto JavaScript . Esse é um arquivo de objeto JavaScript e do plano deste aplicativo. O que eu quero fazer é dirigir todo o aplicativo. Eu quero construí-lo usando um arquivo Jason como base para que o aplicativo em si possa ser dinâmico. E JavaScript vai correr através disso e construir usando os dados Jason construir no teste html real utilizando Onley o conteúdo de Jason. Então esse vai ser o projeto da Web que vamos construir e uma última ferramenta no recurso que vou usar. E você não precisa necessariamente instalar isso no seu computador. Mas isso é no caso de você querer rodar isso em seu computador, então Zampa então isso me dá a capacidade de ir para o host local. Então eu liguei-me a esta pasta em particular. Eu tenho um arquivo de índice, e agora eu posso ir para o host local e eu posso realmente ver a saída do arquivo. Então eu tenho isso correndo em segundo plano. Este é o meu painel de controle do exame, e ele me dá um servidor Apache que é executado em minha máquina local. Então é um servidor virtual que eu posso utilizar e acessar para que ele me dá, me poupa o problema de ter que carregar sobre a página, e ele realmente faz com que pareça um site real. Então, se Deus, eu tenho todos os links dentro do site, eu posso apenas ligar através deles e não vai parecer que é apenas um arquivo, e vai simular o que vai parecer online. Então esse é um dos benefícios de usar isso. Então isso é um Samp. Estas são as ferramentas e recursos que vou usar durante todo o curso e também também minha testa. Meu navegador que vou usar vai ser cromado eso. Tenho o meu cromo aberto aqui. E a coisa realmente legal sobre o cromo é que ele tem ferramentas surdas. Enfraquecer. Inspecione aqui, e podemos abrir, e podemos ver um pouco de informação sobre o que está disponível na página da Web. Então, a idéia é quando seu site é carregado quando o navegador lê através de todo o seu código HTML CSS e JavaScript, ele constrói um dom, e isso é tudo acessível dentro de seu console de ferramentas surdas. É muita informação muito boa aqui. Podemos ver todo o estilo. Temos aqui o modelo da caixa. Temos ouvintes de eventos, que ainda não temos nenhum conjunto. Temos os nossos pontos de descanso, propriedades. Então este é todo o Dom que está disponível para nós. E, claro, se você está familiarizado com JavaScript, então você sabe que o Dom é o modelo de objeto de documento que contém todo esse conteúdo HTML , e nós estaremos utilizando conexões. O que entre o Dom e JavaScript Em ordem, Teoh, fazer algumas manipulações do nosso código HTML. Então, embora entender o amanhecer chegando neste curso não seja 100% necessário porque eu vou estar revendo todos os conceitos sobre o amanhecer, o código-fonte, o que ele está fazendo passo a passo enquanto construímos este quiz realmente legal aplicativo e, em seguida , também é claro, e são ferramentas surdas, temos o console eo console nos permite comunicar para trás e para frente e também fazer alguns problemas de tiro e correção de bugs Eso. Esta é novamente uma ferramenta realmente útil quando a construção de aplicativos e às vezes as coisas dão errado e precisamos de uma maneira rápida de depurá-lo, ou se queremos ver quais dados estavam segurando que poderíamos apenas log-lo no console e visualizá-lo aqui dentro. Então estas são as ferramentas, e na próxima lição, vamos começar a construir nossa aplicação Web. 4. 3 objetos JavaScript: nesta lição. Quero executar rapidamente o que é um objeto javascript. E isso será um precursor do que Jason é. E então vamos construir as perguntas que vamos usar dentro do curso usando Jason. Então vamos saltar para o nosso editor e eu já vinculado eso criou um modelo básico aqui. Construtor de quiz. Eu trouxe botas, cair aqui e criativo aqui. Então é aqui que o conteúdo do nosso questionário eles vão e se vincularam a um arquivo JavaScript. Então eu vou apenas dividir a vista aqui, e eu vou apenas esconder esta parte aqui porque nós não vamos precisar deste quebrado que conteúdo existente torná-lo um pouco menor e e abrir. Há um recurso entre parênteses onde você pode fazer uma versão de edição ao vivo. Então vamos ver o que está acontecendo aqui. Mas talvez precise ver isso e salvar isso e fazer uma prévia ao vivo. Eu só tive que reiniciar colchetes lá, e agora parece que está funcionando, então eu deveria ser capaz de digitar alguma coisa aqui e realmente vê-lo exibido aqui na área de visualização. Então isso é tudo que eu quero configurar com colchetes. Agora estamos prontos para ir, e uma das coisas com as quais quero trabalhar é ilustrar o que são objetos javascript. Então, se você está familiarizado com JavaScript, você pode já estar ciente de variáveis. Ei, variáveis de consentimento e variáveis dão uma estabilidade para conter dados. Então, se temos no objeto em JavaScript Então parece da mesma maneira onde começamos com algo chamado Quem Definir um nome de variável s Ele funciona da mesma maneira que variáveis, e usamos o que é chamado de valores emparelhados. Então o que isso significa é que cada valor vai ter um nome e um valor anexado a ele, separados por dois pontos. Então, se tivéssemos algo como o primeiro nome, e então nós poderíamos separar por dois pontos e então aqui é onde nós teríamos o valor que está associado com esse nome e nós vírgula separá-los e nós poderíamos adicionar quantos quisermos para que pudéssemos Faça um sobrenome. Então, apenas um sobrenome muito comum aqui de Smith. E talvez possamos fazer até mesmo a idade para ilustrar como os inteiros funcionam. Então faça John Smith 40 E então agora eu posso percorrer esses dados e eu posso acessar esses dados e produzi-los usando aliados dentro do meu JavaScript. Então eu vou fazer um documento, direito para escrever um pouco da informação do objeto. Então o documento classifica o meu objeto. E agora eu posso selecionar através do nome do valor emparelhado. Posso obter esse valor associativo. Então, se eu quiser mostrar o primeiro nome, eu poderia fazê-lo assim. Então, quando eu digo que nós vemos isso imediatamente em nossa área de exibição aqui, John aparece. Tão capaz de ver que se eu fosse mudar isso para sobrenome e salvá-lo, vemos que o sobrenome aparece poderíamos fazer união de primeiro nome e sobrenome. Só vou atualizar isso. E vemos como essencialmente é assim que os objetos funcionam e isso vai ser a mesma coisa . E esta é a base para o aplicativo de teste. Estaremos construindo, talvez usando um objeto, puxando algum conteúdo e acessando e colocando dentro de nossa área de exibição. Então, a próxima lição vamos começar a trabalhar com e realmente configurar. O que? Nosso teste vai parecer eso. Vamos começar a configurar esse objeto Jason e, em seguida, transferir de ah JavaScript dentro do código de script. E vamos trazer isso para fora em que meu jace em e colá-lo aqui e, em seguida, usar isso como objeto Jason acessível na Web e, em seguida, realmente puxar essas informações de volta para o nosso aplicativo usando Ajax e carregar isso e utilizar esse aplicativo interno. Então isso está chegando na próxima adolescência. 5. 4 Criar arquivo JSON de matriz de objetos: Então, nesta lição, eu quero passar através da construção desse objeto Jason e apenas me preparando para esse objeto JavaScript , a fim de construir nosso questionário vai como mencionado, nosso questionário vai ser inteiramente baseado no conteúdo deste objeto de dados. E este cão de dados pode realmente ser produzido de várias maneiras para que você possa até produzi-lo através de um banco de dados e assim por diante, e desde que você esteja formatando dentro desse mesmo tipo de formato. Então vamos voltar a isso. Meu objeto que produzimos no último ouvir e começar a criar algumas perguntas. Então, a primeira coisa que queremos fazer pergunta e novamente lembrar esses valores emparelhados. Então, queremos ter uma pergunta e queremos dar a ela qual é a cor da Apple. Essa vai ser a nossa primeira pergunta que vamos estar perguntando aos usuários que vemos aqui que imediatamente ele aparece lá no lado direito como a pergunta porque nós estamos apenas passando por aquele primeiro item lá dentro desse objeto e a razão de que se Você está olhando para isso agora, você é simplesmente bem antes. Eu não citei isso, e agora eu tenho aspas em torno desse valor de nome eso quando estamos usando um objeto za javascript , ele vai funcionar em ambos os sentidos. Mas quando o levarmos para o Jason, queremos ter as citações por aí, porque de outra forma não vai ser um objeto Jason apropriado . Então eu estou apenas me preparando para passar para o nosso próximo passo e realmente construir isso como um objeto JavaScript real. Então a próxima coisa que queremos fazer é adicionar algumas respostas a esta pergunta e com as respostas da maneira que eu quero construir isso é realmente querer ter várias opções aqui para respostas e com objetos. Temos a capacidade de incluir um aumento dentro desses objetos. Isto vai ser apenas uma matriz JavaScript padrão onde vamos fornecer algumas respostas. Então vamos chamar Miss Separá-los. Então vamos apenas fazer azul calma, separado vermelho e vai fazer verde. E então as maçãs podem ser vermelhas ou verdes. Então vamos tentar uma cor que uma maçã normalmente não seria eso roxo Há três respostas possíveis para as perguntas e elas estão sendo colocadas dentro desse tipo de formato. E agora, finalmente, queremos também colocar, ah, queremos ser capazes de indicar qual está correto para que possamos dar informações suficientes em nossa aplicação para podermos avaliar adequadamente os usuários, responder e responder à nossa pergunta e avaliá-la adequadamente e determinar se vamos estar certos ou errados sobre isso. Então vamos e vamos fazer assim que o correto será um, mesmo que tipicamente com os Raios começaríamos com 012 para que possamos fazê-lo qualquer maneira. Então talvez dois possam fazer mais sentido a partir de uma perspectiva visual onde estamos olhando para isso e afundou um poço, também. E este é o 2º 1 nos itens. Então, de qualquer forma, podemos fazê-lo. Eu só estou pensando, talvez a melhor maneira, aquele que faria o menor sentido, o mais sentido de usos para indicar dentro que um re formatos vamos começar em um 01 012 como respostas possíveis. Então, mesmo que tenhamos três, estas são as respostas possíveis, e então faremos um ajuste se quisermos torná-lo mais legível à medida que avançamos para o curso. Então vamos guardar isso. E nós vamos fazer apenas vai console, sair do meu objeto, salvar isso e ir para a nossa página web. Não há nada diferente lá. Vai haver uma diferença aqui. Sempre que entramos no console, abrimos para o console e vemos Pergunta, que cor é uma maçã ampla? Temos três respostas possíveis lá, e temos qual delas está correta? Então agora podemos utilizar isso e acessá-lo e usá-lo dentro do nosso JavaScript. Então eu acho que eu tenho um erro de ortografia lá. Vamos voltar e refrescar isso. Então agora isso está correto. E temos o básico de como podemos começar a construir nosso teste. E, claro, com seus questionários provavelmente não só vai querer responder, fazer uma pergunta. Podemos ter várias perguntas que vamos fazer e com os objetos JavaScript . Então, há maneiras diferentes de fazer isso dentro do Jason. A maneira que fazemos isso é que temos esses colchetes tão tratados como uma matriz de objetos. Agora, quando eu sair para aqui, podemos ver que temos nosso objeto e temos um raio de opções possíveis aqui. Então temos as respostas dela. Então, tudo é apenas horas antes, mas nós temos essa matriz de objetos e agora podemos adicionar uma segunda pergunta. Então talvez de que cor é grama e Anil para verde lá. Então a resposta correta será zero. E vamos refrescar isso. E agora temos dois itens dentro do nosso objeto, Torri. E nós temos todas as nossas perguntas e tudo parece estar pronto para ir, então nós podemos realmente transferir isso e construir um Jace real no arquivo. Então vamos pegar todas essas informações Klopp ainda ir para o My Jason e salvá-lo. E agora temos nosso arquivo Jason na Web acessível. Jason, arquive onde podemos ir, podemos carregar para fora e podemos ver todas as nossas perguntas construídas. Então é assim que o nosso ficheiro de dados vai parecer para o nosso teste. E então, claro, teremos a possibilidade de adicionar perguntas adicionais conforme necessário também. Então, no próximo conjunto de lições onde eu comecei a construir isso e começar realmente a utilizar nossos dados e construir um quiz realmente legal na Web e tudo isso vai ser feito do zero e conduzido por este Jason em arquivo. Então está chegando na próxima adolescência. 6. 5 Dados de análise JSON em JavaScript de objetos: Então, a lição anterior mostramos como podemos criar um objeto JavaScript. Então vamos transformar isso em Jason. Quando formos ao meu ficheiro do Jason, parecemos que conseguimos ver. É formatado ligeiramente diferente, e a saída dele é essencialmente uma força. E isso não é o que temos aqui. Então, se transformarmos isso em uma corda, então temos que remover. Primeiro de tudo, temos que mover todas essas quebras de linha e esse espaçamento branco e realmente transformá-lo em um formato de string. Então vamos ver se isso salva agora. Sempre que retiramos o objeto, não temos mais acesso, porque isso é tudo uma string auto-contido, para que possamos obter esse valor de string inteiro. Mas isso não é muito útil para nós dentro do nosso JavaScript. Então é aqui que temos uma função construída chamada Jason Parts e nos permite analisar através deste valor de string, que é obviamente o que vamos estar retornando aqui quando estamos olhando para nossa web. Você é L R Jason File, e nós vamos devolver este meu objeto, que não é mais um objeto. Na verdade, é uma string e nós vamos retornar isso e analisá-lo através de um objeto Jason . Então vamos fazer um pouco de mudar as coisas, então vamos chamar isso de pode ser meus dados ou algo assim. Eso meu objeto. Agora vamos montar uma marca. Você se opõe aqui e nós vamos analisar. Vamos fazer um Jason analisar os meus dados e, por isso, magicamente, quando atualizarmos isto, voltamos para onde começámos. Mas temos a capacidade de extrair algo como este conteúdo. E este é o nosso. Realmente deveria ser praticamente a mesma coisa. Puxe isso para dentro e podemos ver que podemos usar parar dentro do nosso objeto. Agora, o próximo passo é analisar por aqui ou toe loop por aqui todos os objetos variáveis e talvez até colocar algo em nosso HTML. Então vamos tentar configurar isso para que nós vamos apenas chamá-lo fez saída, e eu vou configurar muito bem. Saída é documentos, e vamos fazer obter elemento por idéia, porque agora que nós nomeamos saída e vamos conter esse elemento no objeto de saída e agora podemos fazer algo como saída. HTML interno é igual ao meu objeto. E, claro, ainda não estamos fazendo loop, mas vamos ver como isso funciona. E se realmente tivermos algo colocado dentro da nossa área visível aqui, então o que for , podemos atualizar isso, e se não passarmos para a próxima pergunta, podemos ver que podemos salvar isso. E, portanto, não está funcionando exatamente. Bem, vamos dar uma olhada no outro navegador. Refresque isto. E então nós temos um problema lá com o HTML interno não pode definir a propriedade de Inter HTML em vez disso. Uma atualização rápida lá. Então eu não tinha realmente salvo no próximo arquivo. Então, agora, quando eu digo que eu posso passar por esses objetos e eu posso ver essas saídas das perguntas dos dados Então isso é bom. Este é o nosso bom começo, Teoh continua a construí-lo. Nosso aplicativo foi capaz de obter acesso às perguntas. E agora podemos até fazer algo onde podemos fazer um loop de quatro aqui para que ele possa definir uma variável. Então este é o meu item que vai ser contido. Estamos tirando isso do meu objeto e passando por ele, e vamos fazer essa saída aqui. Tão estranho quebra linha e feito, que é algo assim e mudar isso para eu ver como isso funciona. Se eu guardasse isso. E agora vemos que temos as duas perguntas sendo feitas lá. Então isso é exatamente o que eles querem na pergunta Mark lá. Agora temos as nossas duas perguntas. Precisamos também construir um loop através de todos os diferentes sobre as diferentes respostas também . Mas vamos construir isto na próxima lição. Vamos continuar a construir este aplicativo porque temos que construir algumas funcionalidades adicionais onde estamos retirando essas informações de dados e utilizando-os para construir nosso quiz eso Não é exatamente como queremos agora. E, claro, nós ainda queremos fazer um pedido Ajax para o Jason File s Oh, tudo isso está chegando nas próximas lições 7. 7 Use AJAX para obter dados JSON em objeto JavaScript: nesta lição. Vamos construir como conduzimos uma chamada Ajax e extraímos esses mesmos dados em nosso aplicativo JavaScript e utilizá-los. Então vamos comentar alguns desses conteúdos aqui porque, claro, não vamos ter esses dados dentro do nosso arquivo e todos os loops e tudo o que vai ser feito dentro dessa função. Estamos a fazer a nossa chamada para o Ajax. Então vamos começar configurando uma função para talvez possamos chamá-la de algo como função e fazermos perguntas do Senhor ou algo assim. E então sempre que rodarmos isso, vamos fazer uma chamada Ajax para um arquivo JavaScript, e então vamos carregar todas as perguntas. Então vou adicionar isso aqui. Então, sempre que iniciarmos o aplicativo, vamos carregar perguntas por padrão. Então vamos configurar essa chamada Ajax, e nós vamos carregar todas as nossas informações de objeto em um contêiner e talvez chamá-lo de meu objeto ou algo assim ou meus dados. Então este vai ser o carregamento real das perguntas no objeto de dados. Primeiro de tudo, precisamos criar um contêiner do meu objeto, e vamos mantê-lo em branco por enquanto. Então isso nos permite mantê-lo como um valor global. E quando estivermos em loop, vamos carregar e acessar todas essas perguntas. Cônsul, ali. E agora, meus objetos não vão conter nada. Eso Vamos configurar a nossa chamada Ajax aqui, e vamos fazê-lo dentro desta função. Então a primeira coisa que queremos fazer é configurar nosso pedido. Então, nosso contêiner de solicitação que vai dar um nome de um E, claro, você pode chamar isso do que quiser chamar isso. Estamos fazendo uma solicitação http. Então o que isso faz é que é um objeto javascript, e essencialmente, ele nos permite abrir a conexão Teoh outra página da Web e, a fim de iniciar essa abertura para que nós façamos um contato de conteúdo, esse objeto, e nós vamos apenas fazer um pedido de obter. E aqui é onde colocamos o U. R l do endereço de onde estamos tentando obter esse pedido. Então temos isso dentro do objeto Jason que criamos e, claro, se precisarmos, podemos sempre atualizar isso. Então é aqui que estamos fazendo o pedido, e então vamos mantê-lo como verdadeiro. Então isso vai abrir essa conexão, e vamos esperar para ver o que é chamado de ESO pronto sempre que abrir uma conexão. Então, talvez antes de tudo, eu faça Ascend aqui e eu consolar o registro. Eu gostaria, Ás, podemos dar uma olhada e podemos ver o que está contido dentro de A antes de irmos mais longe. Então, tudo o que fizemos aqui, nós configuramos um contêiner para a solicitação http. Abrimos esse endereço fornecido pela solicitação, enviamos o método de como estamos fazendo a solicitação. Isto é que eles recebem pedido, e então nós estamos realmente iniciando o pedido que Ellis enviou. Então vamos ver o que acontece agora. Então vemos que sempre que estamos carregando isso, temos dentro desse objeto em particular. Agora estamos todos prontos para ir. Então, estão prontos. Status quatro, temos um texto de resposta, e tudo isso vem do aplicativo ao vivo. Então exatamente o que precisamos é de status 200 nós só queremos ter certeza de que sempre que estamos realmente tentando acessar esses dados que essa conexão está realmente aberta. E recebemos algum conteúdo. Há Então, este é o lugar onde usamos estado pronto para você também pode verificar status 200 este número valores diferentes aqui que você pode usar para fazer essas verificações apenas para se certificar de que tudo está bem dedo do pé e pronto para ir. Então é aqui que eu aplico uma instrução condicional e eu vou usar o A, uh, o valor de um para que eu possa usar um estado pronto ou eu poderia usar este estado pronto. Então vamos, uh vamos rapidamente fazer uma comparação entre um fim isso e apenas mostrar a vocês qual é a diferença aqui vai ser eso nós temos Esta vai ser toda a janela lá, e então o estado pronto está sob um Então talvez, vamos apenas usar um em vez disso em vez de carregá-lo em um objeto ativo. Se um estado pronto for igual a quatro, então sabemos que temos alguns dados lá e estamos prontos para ir para que possamos usar os dados que estão sendo retornados. E como vimos dentro do nosso objeto quando saímos no console. Obtemos todos esses dados de volta e os recuperamos dentro de um contêiner chamado texto de resposta. Então eu tenho uma resposta. Temos um texto de resposta para que possamos utilizar qualquer um destes para extrair essa informação . Eso, vamos fazer assim. E emprestei alguns dos códigos que tínhamos aqui porque na verdade vai ser a mesma coisa. Guarde isso. E então, se o status pronto for igual a quatro, nós vamos eu não deveria realmente usar esses meus objetos. Então talvez eu só use dados e vamos analisar o texto de resposta que poderíamos fazer. Resposta é bem, e assim os dados variáveis vai conter todas as informações do objeto ou esse valor string muito o mesmo que fizemos dentro dos meus dados. Ou, na verdade, por uma questão de consistência, vamos chamar isso de meus dados. Agora temos a mesma coisa que tínhamos aqui em baixo, onde está contida nos meus dados, e agora tudo o que temos de fazer é fazer um loop. Na verdade, isso chegou onde é diferente porque serão meus dados. Mas de qualquer forma, o mesmo tipo de polícia, mesma ideia. Então vamos dar uma olhada nisso e ver o que obtém saída quando atualizamos a página. Então você vê, nós temos este texto de resposta estava carregando isso dentro, mas algo está dando errado. Na verdade, não estamos lá fora a colocá-lo. Há algum tipo de problema aqui. Não vamos pôr os meus dados lá dentro. Então vamos dar uma olhada e abrir o log do console e ver o que está acontecendo lá. Então, se realmente obtivermos algo dentro disso, meus dados Então vamos dar uma olhada no meu objeto de dados e ver o que aconteceu aqui. Então, certifique-se de que estou economizando e economizando. Às vezes, isso é um problema. Então, vemos que dentro do console não estamos realmente executando e certificando-se de que o estado pronto está disponível. Esta é uma das coisas que está acontecendo aqui que não está sendo percebida. Então precisamos construir outra função aqui. Ouça a mudança de estado pronta. Então isso está na mudança de estado pronta, e aqui é onde temos essa função e passamos por qualquer coisa. Se houver uma mudança no estado pronto que podemos registrar essas informações, então vamos tentar isso agora e ver o que acontece. Então vemos que está funcionando exatamente da maneira que queríamos. Eles veriam que o estado pronto muda para dois. Então, não queremos iniciar nossa chamada para fora, mudanças de estado pronto para três para que não passemos por cima. E quando chegarmos ao estado de prontidão e é aqui que começamos a construir nosso objeto, então isso é exatamente o que queremos que aconteça. Não queremos colocar para fora todos esses estados prontos até chegarmos à Ready State para que eu possa receber a carta do console lá também. E agora vamos dar uma olhada e deve estar um pouco mais limpo lá. Então, agora essencialmente, estamos recebendo essa informação do objeto a mesma coisa que temos dentro daquela aplicação web vida . E, essencialmente, estamos todos prontos para começar a desenvolver o resto de nossas perguntas dentro de nossa aplicação. Então, só para ser consistente com o que temos aqui, talvez queiramos fazer algo assim e não vamos realmente fazer um loop e ver o que acontece agora. Então, sempre que atualizamos, ainda não temos nossas informações de objeto lá. Então, o contêiner do meu objeto, Como está o texto de resposta? Então precisamos ainda analisar começou aqui, talvez queira construir outra função, e essa função será chamada compilação com. E esta é uma função que vamos ser chamados depois que o estado pronto passar e nós construirmos nosso objeto, então apenas construa um teste. E a partir daqui por agora, o que só fará o console registrar meu valor de objeto. Então isso garante que só trabalhamos com o meu objeto. Uma vez que haja algum conteúdo carregado lá dentro. Vamos dar outra olhada nisso e ver que estamos todos prontos para ir. Então isso está sendo executado e estamos prontos para começar a construir nosso questionário dentro do nosso arquivo HTML . E tudo isso está chegando no próximo conjunto de lições 8. 9 visualizações de perguntas de compilação em HTML: nas lições anteriores mostraram como você pode obter bolo Dada pode criar um objeto JavaScript . Como você pode criar Ajax request Pull esse arquivo javascript que Jason arquivo em e utilizá-lo dentro do seu JavaScript. Então esta lição que vamos olhar para construir o teste. Eso Primeiro de tudo, queremos começar por percorrer todos os objetos dentro, dentro do meu objeto. E eu ia copiar isso. E agora estamos percorrendo todos os objetos lá. Então nós temos meu objeto e muito legal porque nós podemos obter as perguntas lá e assim por diante. Então vamos ver o que acontece agora. Então, temos duas perguntas que aparecem tão bem exatamente o que precisamos. Eu posso me livrar de que um ocupou algum espaço lá, e podemos continuar a construir as perguntas. Portanto, queremos construir todas as perguntas exatamente como necessário e construir o questionário. Eso Uma das coisas aqui com o teste em si é que queremos ter várias páginas, não teremos essas perguntas em várias páginas. Então é aqui que precisamos ter, valores de página diferentes. Eso, talvez. Vamos voltar aqui para o topo e onde montamos os meus objetos. Vou configurar outro valor aqui, então vamos chamá-lo de Página, e vamos começar inicialmente com a página zero e, em seguida, à medida que avançamos, vamos construir o quiz e dependendo do que o valor da página vai ser eso Uma vez pronto para iniciar o questionário, podemos disparar talvez o carregamento das perguntas e, em seguida, nós construímos o questionário e nós podemos automaticamente talvez começar a enviar Teoh enviar para a página um e, em seguida, ouve que vamos pegar o valor da página ou eu vou apenas chamá-lo P Para evitar confusão, há O nós vamos ter um valor de página existente. Aqui está oh, talvez possamos até fazer página e igualar o dedo do pé um. Então esta é a nossa primeira página ou a primeira pergunta. Então, só para evitar confusão com a pergunta porque já estamos usando isso aqui, eu vou chamá-lo de páginas e podemos passar para o valor da página aqui, e estamos construindo um valor de página globalmente também. Então podemos ou não precisar utilizar isso, então vamos ver como isso funciona e começar a construir isso. Então, queremos criar perguntas para a página um, e queremos ter a capacidade de carregar todos esses dados do meu objeto porque lembre-se novamente mostrou anteriormente como você pode carregar esse conteúdo no meu objeto. Então, agora vamos dar uma olhada nisso e vemos que nós não necessariamente precisa fazer esse loop porque nós temos nós temos valores de página, eso talvez até mesmo voltando para isso e nós podemos automaticamente configurá-lo para a página zero e fazê-lo desta maneira podemos começar com qualquer pergunta que quisermos. Se não começarmos na primeira questão, talvez façamos assim. Então eu só estou fazendo isso dessa maneira para que tenhamos a capacidade de acessar o objeto correto. Então vamos simplesmente consolar , sair e ver se conseguimos obter a pergunta correta. Página 1 e qual será nosso primeiro item no objeto a correr. Então vamos fazer exatamente isso e vamos chamar esta página menos um. Então vamos dar uma olhada e ver o que acontece aqui. Então nós temos que cor é uma maçã. Então essa é a pergunta correta. Então agora nós podemos realmente construir nossa área de saída aqui, então talvez nós queiramos fazer isso, mas nós dissemos que sim. Vou fazer perguntas a estes Mike. Então este vai ser o contêiner de perguntas para a pergunta. E agora precisamos criar um loop através das possíveis respostas. Eso Vamos dar uma olhada nisso e construir um loop através de todas as respostas possíveis lá. E também, vou construir um barco. Meu correto. E então isso vai realmente puxar para trás o valor correto e que eu acredito que nós acabamos chamá-lo de Correcto. Então precisamos armazenar o que encontrou inchado. E agora nós estamos prontos loop através do dedo do pé e colocar algumas perguntas Então talvez nós podemos construir a variável para o titular da pergunta. E vamos começar com apenas estar em branco para talvez queiramos fazer alguma formatação. Temos algumas perguntas. Eso de novo, dependendo de como queremos fazer isso. Então talvez nós vamos apenas nos preocupar com isso mais tarde e criar nosso loop aqui para cada loop. A mesma coisa que fizemos aqui em baixo, onde vamos percorrer todos os itens disponíveis no objeto, mas não vamos usar o meu objeto. Vamos usar o meu objecto, e vamos verificar as respostas. E aqui é onde vamos construir o porta-perguntas. Então, cada um desses titulares de perguntas, eu vou ter algum tipo de valor. Aqui está, então vamos construir este. Então titular pergunta e lembre-se novamente que estamos usando bootstraps. Então isso vai tornar mais fácil para nós fazer algo rápido styling com ele. Então eu vou fazer uma chamada no pequeno. Vai ser seis. Esta é uma aula que eu vou usar e vamos criar um hiperlink aqui. Então vamos ter nossas informações clicáveis aqui. Então estamos construindo nossa pergunta. Eso o quê? Dê ao usuário a capacidade de clicar nessas perguntas. Poderíamos fazê-los como botões também, e então eu vou esquisitar. Então eu vou estranhar essa resposta. Então, sim, isso está ficando bastante longo aqui, mas nós também poderíamos ter colocado essa minha página de objeto menos um em um contêiner também. Então isso vai ser respostas, e assim respostas eu e depois terminar isso e terminar o Div Cervical. Então agora estamos construindo o porta-perguntas e talvez queiramos depois de passarmos por aqui , talvez queiramos construir essa área de saída. Então vamos fazer a saída e definir que inter html. Então eu tenho esse valor lá. Então configurá-lo como assim tem um diff lá. Então adicione a minha pergunta pode até querer Vamos fazer alguma formatação com isso depois, então vamos começar a funcionar. E nós também podemos adicionar em outra linha aqui. Então era um estúpido porta-perguntas. E vamos ver como isso se parece agora. Até agora. Então nós temos todas as nossas perguntas aqui em cima e nós temos nossas possíveis respostas . Então este é um bom começo para construir nosso teste. E, claro, vamos introduzir um pouco mais de formatação também. Então, na próxima lição, vamos voltar ao nosso HTML e estilizar isso um pouco melhor, modo que estamos apresentando nossas perguntas que em uma experiência um pouco mais amigável. Mas esta é a areia básica onde definido e pronto para continuar com a construção de nossa aplicação 9. Estilo de 10 Bootstrap do questionário: esta lição, Vamos saltar para um pouco de botas cair para tornar isso mais amigável. Então vamos saltar para a nossa página HTML e nós realmente não fizemos muito. Então você cria uma div e eu vou dar-lhe uma classe fora do contêiner. Então este vai ser o nosso contêiner geral para todo o nosso conteúdo para esta aplicação Web e nós temos nossa saída aqui. Então é aqui que as perguntas vão ser. E talvez nós queiramos construir em alguns botões adicionais lá também. Então vamos fazê-lo desta maneira onde vamos criar outra div e vamos dar-lhe um panos e igualá-lo para remar. E talvez criemos um estilo para o teste também, que possamos nos identificar. Quais são os conteúdos do questionário caso queiramos embrulhar ou adicionar alguns recipientes Kant adicionais , seu conteúdo e não há nenhuma corda, e este papel vai conter todas as informações para o teste. E então, logo abaixo disso, eu quero adicionar alguns botões também. Então, novamente, eles vão usar papel de classe porque isso é muito fácil com bootstrap toe. Adicione essas classes diferentes. E então vamos criar alguns botões aqui. Então talvez dado um i d. de botão anterior e talvez ocupar toda essa div torná-lo clicável. Uh, então isso é dar a ele um intervalo de chamada de X ou Essam e então eu vou realmente apenas puxar este para fora e fazer outra div aqui. Então, o que fazer com o dibs on? E então vamos fazer outro para botões reais para que ele não faça Não mexa com a forma como queremos que ele seja apresentado. Então classe E essa aula vai ser um botão. Vamos fazer botões primários. Estas são todas aulas de bootstrap de touro. Encoste aquele para a esquerda. E, claro, se você quiser fazer um teste sem a habilidade, Teoh, volte para as perguntas anteriores que você todos tem que fazer é apenas remover esta opção aqui. Agora que temos um anterior, talvez precisemos de outro. Então botão seguinte e e vai puxar este para a direita. Então, é claro, ainda precisamos nos esconder e mostrá-los conforme necessário. Então vamos ver como isso se parece. Então parece um pouco melhor. Talvez precisemos também para a aula, e eu vou fazer estilo na página para não termos vários estilos lá. Talvez precisemos também para a aula, Então, teste de aula e talvez uma fronteira, e você provavelmente vai querer estilizar isso para fazer parecer como você quer que seja apresentado. Então este é apenas um estilo rápido que eu estou adicionando lá. Vamos ver. Então agora nós temos mais de um tipo de quiz looks, nós temos uma pergunta lá dentro. Então vamos voltar para o script Java e adicionar algumas classes aqui? Então isso vai ser eu acabei de chamá-lo de Mike, você tem que manter isso simples, e eu vou apenas aplicar um pouco de estilo para a minha tonalidade. Eu pensei que o tamanho se submete, torná-lo grande. Vamos fazer ainda eu pensei, espere, vamos fazer um ousado, então você tem esse visual. E vamos também adicionar alguns vasos por lá, então, destacando um pouco mais das perguntas, lá vamos nós. Então agora temos algumas perguntas, e é claro, precisamos adicionar algumas classes também à nossa área de seleção aqui e vamos usar essas classes também para torná-las clicáveis. Então vamos fazer isso também que nós vamos apenas chamá-los. Eles constroem um aqui para câncer de botão ou algo assim e fazem uma fronteira. Por tanto tempo, escolha sólida. E era algo preto para fazer algo apenas um pouco fora de preto e tinha alguns vasos lá. E também, vamos adicionar no texto a linha, então centralize esse texto e vamos ver como isso se parece. Algo nesta classe sobre os botões é que estamos construindo estes fora. Oops. Eu preciso usar os tribunais duplos porque eu uso os tribunais únicos para o JavaScript. Vamos dar uma olhada nisso. Então agora eu ainda preciso adicionar, talvez transformá-los em uma tela. Então ele ocupa todo o bloco de exibição espaço alocado, então ver se isso faz a diferença. Então ele faz. Está começando olhar um pouco melhor lá onde temos que cor é uma maçã, e então temos nossas possibilidades. Aqui está para que possamos até mesmo querer anexar o estilo assim pode nem querer ter hiperlinks lá. Talvez queiramos tirar isso. E talvez eu tenha transformado isso em uma div para que eu não tenha todas essas coisas de hiperlinks lá e então enfraquecer o estilo que def para fazer parecer mawr do jeito que queríamos apresentar. Então também, vamos adicionar um pouco mais de estilo aqui. Então, no botão, responda às aulas e vamos adicionar o mouse sobre elas. Então, para pseudo classe pairar e vamos fazer um plano de fundo para cor de fundo. De que cor queremos que olhem quando pairaram? Então talvez esse tipo azul de cor e talvez mudemos a cor da fonte para ser isso, e queremos fazer o tamanho da fonte um pouco maior também. Vamos dar uma olhada nisso agora. Então agora temos possíveis respostas aqui. Podemos pairar sobre eles. Podemos ir em seguida e anterior sobre as perguntas, e temos nossa pergunta lá em cima para que pareça que nosso estilo é muito bom, e na próxima lição, vamos construir algumas dessas funcionalidades. Portanto, já sabemos qual é a resposta correta. Eso Nós podemos realmente mostrar isso se quisermos, e nós vamos remover isso em um momento posterior. Então vamos fazer desta forma, onde temos a nossa resposta. Então a pergunta e eu vou estranhar então e assim a resposta correta. Então, poderemos ver qual deles está correto. Sabemos que o número do item em que re que este é o 1012 correto para torná-lo um pouco mais interessante. Em vez de colocá-lo lá em cima, os anúncios corretos estavam passando por aqui. Podemos ver isso. Se sim, eu tenho um valor. Talvez o Cônsul tenha desligado só para ter uma ideia melhor do que está contido em mim e então aplicarei essa condição lá. Então é saltar de volta aqui por está apenas voltando. Os números de índice eso podemos verificar pelos números de índice podemos ver se eu é igual ao meu correto. Então vamos ver o que devemos fazer se é igual a isso meu correto então, mas configurar mais uma variável. Então, sim, correto. E deixe isso em branco por enquanto. E se é o correto, então deixa sair em um Astérix. E então minha pergunta Então, enquanto estamos passando por aqui percorrendo as respostas. E agora, sempre que olhamos através e olhamos para isto novamente, devemos ver que temos um Astérix perto do correto. Então, e uma das coisas. Então nós precisamos realmente mudar isso para não ser nada, porque nós não estamos realmente limpando esse valor, que nós poderíamos fazer bem s. Então agora nós sabemos qual deles é o correto. Nós temos isso escrito lá em cima para que possamos agora remover aquele que é o valor correto da pergunta. E há uma razão para eu estar fazendo isso. E a razão vai ser que nós queremos adicionar algum tipo de corte de resíduos de algum tipo de diferenciador aqui para o correto para que possamos facilmente pegar isso e verificar se eles realmente clicaram no correto. Então, tudo isso está chegando no próximo conjunto de lições 10. 11 Mover-se entre perguntas: Nesta lição, vamos adicionar alguns desses ouvintes Teoh nosso questionário. Então, vamos ser capazes de realmente dizer em que item o usuário clicou. E então podemos fazer algum JavaScript lá também e fazer progressão através do questionário, permitir que eles façam a próxima pergunta e assim por diante. Então vamos dar uma olhada em adicionar isso. E talvez antes de tudo, podemos começar adicionando o próximo e anterior e atualizando aqueles que ouvintes porque eles vão ser um pouco mais simples e ao contrário dos ouvintes de eventos que vamos adicionar para o nosso próprio teste. Então aqueles simples porque eles não estão realmente mudando eles não vão ser dinâmicos . Então tudo que eu preciso fazer é olhar para o meu código-fonte aqui, ver o que eu nomeei esses valores, e então eu posso configurar meus ouvintes de eventos aqui. Então eu tenho aquele e eu tenho aquele. Então aqui podemos nos configurar no clique. Então, usando o amanhecer mais uma vez e aqui podemos ter uma função e ter esta função executado. Então nós já configuramos uma função que realmente queremos inicializar, e que vai ser o chamado chamado de teste construído Aqui s O. Talvez quiséssemos incrementar o valor da página e construir um questionário a partir daí. E é aqui que talvez a melhor ideia é que passamos por um valor de página aqui. Então página e irá configurar página é igual a página. Então isso nos poupa o trabalho, na verdade ter que produzir várias páginas. Eso isso irá apenas loop através da página e podemos definir tudo dentro de uma função. Então vamos fazer desta maneira onde vamos construir quiz e vamos pegar a página mais um simplesmente essa é a página mais um. E isso é anterior. Então isso seria menos um assim menos um. Então lá vamos nós. Então agora temos as páginas reais enfraquecer incrementar as páginas nesse tipo de moda. Então vamos ver se isso realmente funciona. Então temos um problema aqui onde não podemos ler o valor da pergunta porque não estamos recebendo um valor para a página porque eles estavam sentados em uma página mais um. Então algo deu errado aqui. Então vamos dar uma olhada nisso com um pouco mais de detalhes e ver exatamente o que aconteceu aqui. Então eu console logout o valor para Paige. Podemos realmente ver o que o valor para páginas antes que ele lança o erro em. Vemos que o valor para Página é negativo. Então você tem Page sendo definido como zero. Estamos passando um valor de PG toe um, e por algum motivo ele não está pegando esse PG um, e ele está realmente definindo a Página 2 mantendo zero. Isso não é exatamente o que queremos que aconteça aqui. Então você vê, isso é passar um valor de um negativo. Então, de novo, não temos certeza do porquê. Está passando como um negativo. Quando olhamos para isso mais de perto, vemos que na verdade está passando por esses valores aqui quando ele está executando o teste de compilação. Então ele está executando o teste de compilação sem esperar até que ele seja realmente carregado. Então este é um dos problemas aqui que nós não estamos realmente carregando, e ele está executando o teste de compilação. Então, o problema, realmente é que precisamos. Agora que adicionamos os ouvintes de eventos no clique, eles são ambos sempre que a página está carregando, eles estão realmente disparando, e eles estão passando e carregando as páginas. Enquanto isso, ainda não chegamos ao ponto onde realmente carregar a página que queremos utilizar para que possamos ver isso sempre que comentar um deles para fora. Então vamos dar uma olhada nisso agora, e podemos ver que ainda estamos recebendo aqueles negativos porque aquele primeiro 1 há um problema real lá que está carregando um negativo para que possamos adicionar isso como um ouvinte de evento de anúncio . Ou podemos fazer algo aqui onde podemos ver que se a página é menor que zero. Ou talvez nós apenas mantê-lo fora se Page é maior do que zero e embrulhar tudo isso em uma função que nós não temos nenhum daqueles disparos de falta daqueles ouvintes de eventos. Então, agora, quando o carregamos, podemos ver que ele está funcionando um pouco melhor lá, e ainda não estamos disparando isso. Então vamos ver o que está acontecendo agora sempre que estamos clicando, isso não parece que ele está realmente disparando essa função. Então a resposta aqui vai ser muito rápida e uma função real, e isso nos permitirá realmente acionar essa função quando ela for coletada. Então vamos fazer a mesma coisa por ambos. Salve essa. E agora vamos ver se podemos realmente progredir com o teste. Então, acertamos a próxima pergunta. Temos novas perguntas. Aqui nós acertamos o anterior. Vemos que somos capazes de passar pelo teste e, se tivéssemos mais perguntas, veríamos ainda mais perguntas sendo exibidas. Então agora nós configuramos a capacidade de passar pelo teste. E, claro, existem diferentes maneiras de nos ouvintes de eventos. Se quisermos adicionar ouvintes de eventos sempre que estamos adicionando-os através desses eventos dinâmicos, essas funções de clique podem não funcionar, e especialmente porque eu quero realmente adicionar os's, fazer thes clicáveis e ter ouvintes de eventos ouvindo eles, eso adicionando em ouvir através da classe. Então, talvez percorra todos esses objetos de classe e ouvintes de eventos anexados a eles. Eso Podemos fazer isso também. Enquanto estamos construindo as perguntas, podemos construir cada um desses ouvintes de eventos e anexá-lo em nossa página. Então vamos dar uma olhada em como isso vai parecer e adicionar em outro ouvinte de eventos. Então talvez esta seja uma nova função. Então, estou pensando que talvez possamos chamar essa de minha resposta. Eu não tenho certeza se você usou alguns destes antes, então eu estou apenas tentando dedo rapidamente dar uma olhada e ver se certificando de que eles não foram usados. Então, o que o Cônsul registra e clicou? Então, talvez isso seja suficiente para agora que vamos anexar o ouvinte do evento para que dispara a minha resposta. E isso vai percorrer todos esses botões e fornecer essa funcionalidade de capacidade que podemos fazer esses botões clicáveis. Então vamos adicionar aqueles ouvintes de eventos também agora, então aparecer para ele é aparecer para verificar quais são os nomes de classe que eles vão ser e apenas ir lá em cima. Então vamos ter um monte de nomes de classe com BT e responder. Então eu vou mostrar a vocês como fazer isso na próxima lição, porque esta lição já está começando a demorar um pouco. E eu quero realmente ser capaz de passar por isso em muito bons detalhes sobre como nós vamos anexar os ouvintes veterinários a esta classe em particular e fazer todos os nossos botões clicáveis. Então, está chegando na próxima lição. 11. 12 addEventListener: Então, nesta lição, eu quero mostrar a vocês como podemos fazer todos os nossos botões clicáveis e, em seguida, talvez até mesmo puxar para trás os valores que estão contidos nesses botões. Então vamos tentar este agora e ver como podemos criar isso e abrir nosso editor. E a primeira coisa que eu quero fazer é criar um objeto para conter todas essas classes. Então temos um monte de aulas ou respostas de botões de chamada. Então, vamos criar contêiner para estes. Então, botão, ou talvez eu possa chamar de resposta. Então este vai ser o contêiner que vai manter todas as classes que vão ter essa classe particular ligada a ele. E vamos usar o documento get para que você não obtenha elementos por nomes de classe para obter elementos por. Então obtenha elementos pelo nome da classe. E então é aqui que vamos especificar todas essas classes de resposta de botão. E só para mostrar que vamos puxá-los através de um registro de console e eu vou me livrar desse registro de concertos. Então volte para fora e atualize-o, e podemos ver que agora estamos realmente recebendo todos esses botões que contêm essa informação com o valor lá s. Então temos algumas opções aqui do que podemos fazer. Então, se quisermos apenas fazer uma comparação da resposta para a pergunta e colocar isso na resposta correta. Então talvez esta seja uma maneira melhor de fazer isso onde temos o meu correto, mas eu quero puxar para trás para que não tenhamos que colocar nada dentro desse javascript real que o usuário será capaz de ser capaz de ser capaz de detectar. Então, vamos nos mudar. Correto. Então, defina outra variável aqui, outra variável global aqui, então correto e senhor, e nós vamos apenas defini-la para um padrão de zero e, em seguida, ir para baixo aqui e eu vou segurar usar isso como um dedo do recipiente, manter o valor da resposta correta real, e assim isso vai ser bastante longo. Mas ele vai dar uma estabilidade para fazer uma comparação entre o valor que está sendo enviado nesse HTML interno a partir desse valor clicado para ver se o que está sendo contido nesta resposta correta, então talvez eu poderia apenas colocar a resposta correta quando ele recebe clicou. Então isso vai ser a mesma coisa que está contida no texto interno da resposta correta. Então agora vamos adicionar em nossos ouvintes de eventos para isso e normalmente nós teríamos toe loop através de todos os diferentes todos os diferentes que mantêm esse nome de classe. Mas como estamos criando-os dinamicamente, devemos ser capazes de fazer isso neste tipo de formato onde estamos adicionando no cérebro, você um. Não, nós precisamos fazer isso depois aqui porque nós realmente não adicionamos no ouvinte evento corretamente lá. Então precisamos criar outro loop aqui. Então configurar a variável X é igual a zero enquanto X é menor que o comprimento de ser comprimento de resposta e vamos incrementar X por um. Então, para criar esse loop, e então este é o lugar onde podemos adicionar esses ouvintes de eventos. Então, para cada resposta de ser, vamos estranhar selecionar X. Vamos adicionar ouvinte de eventos, e o ouvinte de eventos vai ser um clique, e vamos enviá-los para a minha função de resposta. Falso eso Isto está configurando o evento, ouvintes. Então vamos tentar o mesmo e ver se isso realmente vai funcionar. Eso Now, sempre que clicamos em qualquer um desses, podemos ver que estamos realmente recebendo qualquer que seja o valor correto que esteja lá. Então agora tudo o que precisamos fazer é pegar o valor dos elementos clicados e compará-lo com o valor real que estamos procurando. Então eu vou te mostrar como fazer isso na próxima lição. 12. Verificação de valor de 13 innerText: Então a lição anterior que analisamos, como podemos adicionar ouvintes de eventos e a coisa realmente legal sobre o Dom e JavaScript é que ele passa sobre todas as informações do elemento. Então o que eu quero dizer com isso é que agora eu posso ir para o console e nós vamos fazer o diretório, e nós vamos usar isso. Então, isso contém todas as informações que esse objeto específico tem que iniciaram ou dispararam desse clique. Então o que quero dizer com isso é agora quando eu clicar nisso para vermos este Div. Bt uma resposta. E nós temos todas essas informações realmente úteis e eu quero usar texto interno. Então, se eu fizer isso lá dentro, então no texto dela , então, vamos voltar e tentar essa agora. Então, agora, quando clicamos, estou vendo esse texto interno, então agora posso fazer uma comparação para ver se vermelho é igual à resposta correta real que estamos procurando. Então, se em seu texto é igual a isso, em seguida, configurar a variável Bem, talvez chamá-lo de meu resultado. E por enquanto, deixe em branco. Então, se estiver correto. Então meu resultado será correto e então será incorreto. E claro, vamos atualizar isso mais tarde. Mas agora podemos realmente descobrir se o usuário tem algo correto ou se ele está incorreto e podemos começar a construir uma pontuação de nossa reviravolta. Vamos tentar o mesmo. Tão incorreto, incorreto. E este deve estar disparando para corrigir. Então não sei o que aconteceu aqui. Então vamos dar uma olhada e ver o que está acontecendo aqui em nossos resultados. Portanto, não é capaz de comparar as respostas corretas. E então o problema aqui é que nós adicionamos. Então nós vamos para o segundo item aqui, iria para o texto interno, e nós vemos que temos este Asterix vermelho. Então nosso próprio código aqui de uma das lições anteriores está realmente causando esse problema. Então talvez se livrasse disso completamente e atualize-o. Então agora estamos passando e vermelho, e agora podemos ver que ele está voltando corretamente. Então essa era a questão onde o HTML interno e seu texto tinham mudado. Também poderíamos ter atualizado o dedo do pé. Olhe para que este valor interno oito texto interno com que Asterix ou poderíamos remover esse burro truques eso tudo dependendo de como queremos fazer a nossa comparação para as perguntas. Então agora temos que trabalhar nesse correto que podemos passar e podemos até ir para o próximo e podemos ver quais estão corretos. Quais estão incorretas? Então, a próxima lição podemos começar a construir pontuação de todas essas perguntas dentro do nosso questionário e talvez até mesmo nós queremos aplicar algum salvamento para esses valores eso criando um re para salvar todas as nossas pontuações e, em seguida, para ser capaz de, se formos para anterior já preenchido. Então isso está chegando no próximo conjunto de lições. 13. 14 Como selecionar CLASES Alternando cursos em elementos: nesta lição. Quero mostrar a vocês como podemos realmente reter informações que foram selecionadas. Então, quando selecionamos vermelho, passamos para o próximo e usamos como verde. Queremos voltar e ver que Red já está selecionado. Não queremos Blue Purple, então queremos adicionar uma aula. Teoh indica que este já foi selecionado, e talvez até queiramos adicionar em uma classe sempre que fizermos essa seleção. Então vamos criar uma resposta de célula de classe. E sempre que este em particular é clicado, vamos criar algum tipo de cor de fundo para então talvez queiramos ter este tipo de cor de fundo e texto de peso. Então, o que quer que tenhamos selecionado uma resposta eu quero adicionar nesta classe. Então vamos voltar ao nosso JavaScript e ver onde atualizamos isso. Então, inicialmente, o que eu quero fazer é sempre que a resposta for selecionada, eu quero adicionar uma classe ao elemento que acabamos de selecionar. E então vamos até aqui e sabemos que já selecionamos esse elemento. Podemos ver que, ao amanhecer, temos o que chamamos de “Lista de Classe”. E também temos uma função embutida em javascript onde somos capazes de alternar isso. Então, sempre que fazemos essa seleção, nós cantata ggl e atualização e classe ADOT. Mas o outro problema aqui, também, é que nós realmente queremos remover essas classes daqueles que não têm essa seleção. Então nós queremos realmente loop através de todos eles e apenas adicionar a classe para esse elemento selecionado , e queremos removê-lo dos outros. Então, primeiro de tudo, vamos tentar isso onde alternar e estamos adicionando nesta classe e mostrar como isso funciona. Então, sempre que fazemos nossa seleção aqui, temos todas essas perguntas. E agora podemos, é claro, clicar neles e alterná-los. Então, o que precisamos é de uma maneira de realmente identificar cada uma dessas perguntas e talvez fazer um loop através dela. Então eu vou adicionar algumas informações adicionais na pergunta aqui onde eu vou adicionar em um atributo para que eles estão apenas indo sobre nós estamos adicionando na classe botão e eu vou fazer um dado I d. e eu vou usar esses dados I d toe segurar o valor que este elemento em particular é em que ordem? É príon apresentado. Essa talvez seja a maneira mais fácil de passar esse valor. Então o valor do índice vai coincidir com o valor que estou apresentando aqui. Então meus dados i d para este vai ser o que eu vou usar analisar em Jirsa Lissa construído em função e JavaScript para virar para ter certeza de que o valor, em seguida, passando aqui, o valor do índice é realmente vai ser um entrevistador. Valor eso Agora que eu adicionei que um em eu posso pegar que sempre que eu clicar na resposta. Então, ele vai estar contido dentro disso, então eu não vou usar alternância, mas eu vou olhar através de todos os diferentes eu vou obter o i d. Então, primeiro de tudo, eu vou pegar que i d Então índice, i d ou algo assim. Então, fique com ele. Eu d e vou usar este get então eu vou obter um tributo, e então aqui eu poderia apenas especificar os atributos que eu quero selecionar, então nós precisamos ter certeza de que nós citamos por lá. Então agora o valor para isso vai ser o mesmo que criou aqui. Então eu vou saber em que ordem isso está aparecendo. E agora eu posso fazer um loop através de todos os disponíveis. Então vamos fazer um loop e nós apenas começar com um valor de Q igual a zero, e nós vamos loop através de todos os elementos fora e passar por todo o comprimento desses elementos. Eso provavelmente vamos ter que começar com os pais e vamos fazer crianças. Poderíamos fazer algo com irmãos e voltar para o pai s. Então vamos tentar isso no início. Mas temos vários elementos diferentes profundos. Então talvez a melhor maneira de fazer é começar com os pais, sair e fazer crianças. Então vamos apenas fazer o comprimento das Crianças. Então lembre-se novamente que estamos usando saída é o nosso contêiner principal para o teste. As Crianças vão ser todos os elementos que estão contidos no seu e, em seguida este vai ser o comprimento das Crianças que estão disponíveis lá, e nós estamos simplesmente fazendo um loop através das perguntas aqui e fornecendo aquelas dentro dessas elementos. Então estes serão todos aqueles dibs que estão dentro do contêiner principal. Então faça esse incremento. Q E dê uma olhada nisso. E agora o que queremos fazer é que realmente queremos saber que informação. Então vamos fazer um console rápido, sair e ver se podemos realmente produzir todas as informações do nó. Então nós temos saída e isso está ficando muito fundo no dormitório. Então crianças e como olhamos através deles e queremos fazer as Crianças das Crianças sobre isso deve nos mostrar cada um desses elementos que têm o BT e A N s para aqui . Atualize a página. E agora, quando clicamos, vemos que pegamos as Crianças. Então nós temos um extra aqui, mas nós temos as crianças que estão disponíveis porque nós estamos realmente recebendo esse título lá e então esse título não tem nenhuma criança. Então, estamos nos aproximando de ser capazes de identificar todos e cada um dos elementos dentro de nossa página. E então podemos, é claro, passar por esses elementos. Verifique as classes disponíveis aqui e remova e adicione remova classes conforme necessário. Muito parecido com o que fizemos com a criança. Então, uma outra maneira de fazer isso, lembrando que já colocamos essa resposta em uma matriz de objetos. Então talvez não precisemos necessariamente fazê-lo neste Mork, que é uma maneira mais complexa e nós podemos realmente percorrer todos os itens como fizemos aqui antes, e então simplesmente produzir o classless. Então vamos ver se isso realmente funciona. Então nós temos nosso registro cônsul aqui e assim console e vai fazer diretório consulado para que possamos realmente ver o que está disponível dentro do objeto amanhecer e fazer ser resposta. E desta vez vamos usar o X. Então vou fazer o mesmo aqui. E vamos verificar isso para ver quais resultados obtemos aqui dentro desse diretório. Então, agora, sempre que eu clicar em, vemos que somos capazes de obter acesso a esse nome de classe também. Então eles tinham um monte de nomes de classe lá. Poderíamos adicionar e remover equipes de classe, conforme necessário. Então, na próxima lição, eu vou estar mostrando a vocês como nós podemos fazer atualizações para esses nomes de classe e até mesmo gravar enquanto estamos clicando nessas respostas gravá-los à medida que nos movemos para frente e para trás, então isso está chegando no próximo conjunto de lições. 14. 15 Seleção de Salvar: Então, nesta lição, eu posso realmente remover este aqui Exército, mas poderia apenas confiá-lo para que possamos referi-lo no futuro se alguma vez quisermos acessar nossas aulas neste tipo de formato, mas provavelmente parece que pode não precisar fazer isso desse tipo de maneira. Então, como estamos looping através de todas as respostas disponíveis, temos uma lista fora são lista de classes para que possamos fazer isso também, onde podemos fazer lista de classes e esta lista. Então todas as classes disponíveis lá e o que eu quero fazer é que eu quero adicionar na lista de classes se somos iguais a I i d. Então, se X é igual a I, I d. Eu quero adicionar nessa classe Se ex i d é igual a X, Eu quero adicionar em uma classe para o classless e, caso contrário, eu quero removê-lo. Então lista Kloss e estranho eu esquecer o que a classe era que estamos adicionando. Mas vamos dar uma olhada no nosso HTML. Então, nós estamos adicionando desta classe, então selecione resposta e o oposto lá que queremos removê-lo se eles não são iguais. Então vamos tentar o terno e ver se isso realmente funciona. Então, sempre que fazemos nossa seleção, estamos adicionando essa lista de classes, e desta forma podemos realmente ver essas seleções sendo processadas. E agora em seguida, precisamos adicionar, precisamos adicionar,de certa forma, a fim de lembrar essas seleções e esse número de diferentes maneiras de fazer isso . Eso eu só estou pensando se pudermos abrir seu editor, nós podemos até mesmo conter isso dentro do objeto para que possamos criar porque sabemos que meu objeto e nós temos página menos uma vez infelizmente, é Connell em. Podemos criar um novo item neste objeto e poderíamos fazer algo como minha seleção é igual a qualquer que seja o valor aqui. E então, enquanto estamos passando por aqui, talvez pudéssemos dar uma olhada e ver adicionar em uma determinada classe de modo que uma classe é igual chifres, disse isso a nada, e vamos manter isso dentro do loop, e a razão é que o lado sempre tem que redefini-lo e adicionar que outra declaração então novamente, provavelmente muito longo, e nós provavelmente poderíamos encurtar isso em algum momento. Mas meu objeto elogiou menos um meu S C l. E se for igual a I, então ele vai definir um novo valor para uma classe. E esse valor será qualquer que seja a classe que quisermos usar e agora vamos para aqui . Então, enquanto estamos apresentando e como estamos fazendo loop através, eu quero apenas adicionar isso então não vai adicionar nada se houver se está em branco se isso não for verdade, mas se for verdade, então ele vai adicionar esse clássico. Então vamos tentar o fato e ver se acontece. Eso selecionando azul Estamos ficando próximo roxo e agora voltamos e vemos que Azul já está selecionado. A mesma coisa para roxo. Vemos que já está selecionado Red and Salon. Então, a próxima lição precisamos, uh, para gravar aveia maio precisamos registrar todas as seleções em um array e apenas fazer uma verificação para ter certeza de que eles estão corretos ou podemos fazer alguma coisa. Houve um problema lá, então não havia valor para isso. Obter atributos por algum motivo. Então, vamos dar uma olhada no próximo também para ver o que está lançando esse erro e fazer quaisquer atualizações que sejam necessárias. Então vamos dar uma olhada nisso no futuro. 15. 16 Movimento entre questões conclusão do questionário: aquela área anterior que vimos. Isso foi porque eu fui capaz de clicar no botão seguinte e na verdade não estamos. Estamos fora do caminho. Vemos que nossos valores de página estão muito fora e voltamos, na verdade para nossas páginas existentes, então estamos bem. Então nós temos um problema real aqui com a mudança seguinte, movendo-se anteriormente e na verdade não ter nenhum dado que está sendo relacionado a isso. Contact eso Existem algumas coisas que podemos fazer sobre isso, e vamos tentar o que podemos fazer com os valores do. Assim, com os valores da página, queremos ter certeza de que as páginas estão contidas nas páginas reais disponíveis. Eso Nós não queremos ter a capacidade Teoh mover próximo ou para construir quiz, passar para as diferentes páginas. Se qual página não está disponível tão idealmente, se eles passarem para a próxima página do que, uh, se não tivermos nada além disso, então devemos ter que o teste está concluído e talvez escrever algo diferente. Então não deveríamos tentar escrever perguntas e obter dados. Se tivermos movido uma página fora desse valor disponível e temos se Página é maior do que zero eso. Temos também de incluir isso. Se a página estiver, , precisamos ver se o teste está concluído. Então precisamos fazer uma verificação aqui para ver se o teste está concluído. E se a citação estiver concluída, vamos fazer alguma coisa. E se não estiver concluída, então podemos continuar com a lógica que temos analisado anteriormente. Então, ia salvar isso. E agora temos um espaço reservado aqui. Então, como sabemos onde estamos dentro do teste? Como sabemos quantas páginas estão dentro do questionário e assim por diante? Então vamos dar uma olhada nisso e ver que temos um valor de página lá, e toda vez que estamos clicando nisso, estamos clicando no valor da página. Mas também temos algumas informações no objeto. Sabemos que o objeto tem um comprimento. Então, se eu fizer algo assim, então se pudermos, podemos verificar se o comprimento do objeto, talvez um console, logar isso por enquanto e então vamos aplicar são declaração condicional. Então vai ser algo onde estamos usando comprimento estavam usando. Talvez façamos o mesmo por enquanto, Page, Page, porque nós vamos estar fora colocando ambos os valores e você pode dar uma olhada melhor no que está acontecendo aqui. Então, agora, sempre que eu clicar nele, eu tenho meu primeiro valor aqui. Isso é ser produzido. Então esta é a página, e depois o próximo é o comprimento, então o comprimento permanece o mesmo. Então sabemos que temos dois itens nesse objeto, mas estamos começando com páginas de zero e depois páginas de um. E aqui é onde, o quê? O que eu tinha mencionado antes. Quando estamos olhando para as páginas, eles não estão exatamente alinhados com os objetos porque os objetos temos dois objetos em seu comprimento. Eso Temos duas opções aqui onde podemos subtraí-lo ou podemos aumentar a página . E talvez não tenhamos que fazer essa página menos uma. Então, talvez vamos tentar fazer isso dessa forma. Onde vamos nos livrar dessas páginas menos aquelas onde estamos selecionando esses objetos? Porque estamos fazendo um monte desses, e na verdade está parecendo muito confuso, então eu tive que remover todas as páginas menos. Guarde isso. E agora podemos ver que a página deve ser equivalente ao comprimento do nosso objeto. Então vamos dar uma olhada nisso e ver o que podemos fazer com isso. Então, de que cor é? A grama é verde e estamos automaticamente começando com a pergunta errada e não somos capazes de nos unirmos. Então, digamos que precisamos atualizar este também. Este lugar é um sinal de igual aqui e construir quiz. Mabel começou no zero, então começamos na primeira página, e agora estamos começando na página zero. Estamos definindo para azul. De que cor é uma maçã? Que cores? Grama. Está a ver, tudo está a funcionar correctamente. Então isso foi apenas um pequeno turno. E isso foi apenas para atualizar o que estamos fazendo com nossas páginas. Então, uma das coisas aqui que notamos que o comprimento da nossa página também vai ser . Mas nossa página só pode ir zero e um. Então, temos duas opções aqui onde podemos ver se o comprimento da página é maior do que a página. Ou talvez pudéssemos fazer algo como se a página fosse menos um porque precisamos subtrair isso. Acho que, na verdade, não, seria mais um. Então é aí que precisamos manter esse mais um. Então, se Page mais um é menor que isso, então sabemos que queremos executar outra coisa. Talvez queiramos um lugar no cônsul por enquanto. Apenas um espaço reservado que diz Cônsul Log concluído, concluído e vamos tentar o mesmo. Então agora, há um erro. Vamos saltar para lá e ver o que aconteceu lá. Então falta um suporte lá. Tente isso de novo. Veja, não pegamos dois anos no console, então isso é bom. Então, qual é a cor dos gráficos? E agora vemos que estamos concluídos e podemos realmente progredir lá. Então isso é bom, e nós não deveríamos realmente implementá-lo também. Então, uma vez que passamos isso, então devemos desabilitar essa capacidade de incrementar as páginas também. Então talvez pudéssemos definir o valor real da página para ser o comprimento da página mais um para que não importa o que aconteça, vamos ver o que acontece agora. Não podemos passar dessa página também, também, então você pode clicar quantas vezes quisermos. Mas sempre que tentamos ir ao três, não podemos ultrapassar isso. E nós também podemos ir para baixo ou eso isso então novamente, dependendo de como queremos representar este teste, podemos querer ter a capacidade de os usuários serem capazes de avançar e produzir algo, ou podemos querer que eles sejam capazes de voltar . Eso novamente, dependendo de como queremos representar isso agora, a maneira que isso é configurado é que nós estamos definindo este comprimento de página e nós não vamos permitir que o usuário para mover pasta. Então eu poderia fazer algo assim, e eu acredito que isso provavelmente me permitiria voltar. Então isso está funcionando. E se eu me mover para completá-lo, eu posso voltar também. Então, algo lá para fazer uma pequena diferença em como estamos representando o conteúdo e novamente movendo-o de volta, e estamos de volta aos valores que estamos olhando. Então, a próxima lição, vamos adicionar algumas pontuações, e então é aí que vamos representar o que foi selecionado e como será a saída . Então isso está chegando no próximo acordo. Essence 16. 17 Quiz dinâmico adicionar novas perguntas: Então vamos construir em outro array dentro do nosso objeto, e este array vai conter as respostas. Então ou as respostas. Então, minha resposta. Quem é a minha ou talvez algo parecido com a minha resposta à pergunta? E este na verdade vai ser um array porque eu quero manter todos esses valores. Então, se estiver correto, se a pergunta estiver correta, então eu quero enviar um valor de um. Caso contrário, não terei um valor de zero. Então eu quero fazer isso aqui, onde podemos definir as respostas aqui e apenas para ter certeza de que as coisas estão corretas ou incorretas, e então podemos fazer nossa pontuação. Há uma série de maneiras diferentes de fazer a pontuação enfraquecer, fazer a garganta de pontuação, a página ou garganta o teste, mas talvez uma maneira mais fácil é realmente calcular tudo no final do teste. Então, neste momento, sabemos se a pessoa está perguntando e eu estou respondendo correto ou incorreto, mas talvez nem precisemos usar isso porque podemos apenas gravar essa resposta e adicionar isso em nossa matriz. Então vamos apenas fazer isso onde temos esta matriz e nós vamos apenas adicionar na resposta selecionada que eles selecionaram e que vai estar usando que i d novamente. Assim é. É importante obter esse valor porque estamos reutilizando-o várias vezes aqui dentro deste aplicativo. Eso Agora tudo o que precisamos fazer é identificar a página atual. Então eu acredito que nós provavelmente poderíamos fazer isso assim e como o barco nós colocamos no cônsul. Então o registro do console, e eu vou gerar esse array com todas as suas informações. Então, salta para cá e vê o que podemos fazer. Então agora temos que uma corrida que respondeu em zero nós temos Agora nós respondemos que um fora para enfraquecer atualizá-lo. Então agora estamos loucos. Não queria aquele, aquele e assim por diante. E isso é realmente muito legal porque nós podemos realmente remover que algumas das coisas que fizemos anteriormente aqui, onde nós estamos selecionando e estamos criando este objeto para o meu S C l e nós podemos apenas verificar para ver se essa resposta matriz é equivalente a esse item lá. E se for, então vamos adicionar a turma. Então poderíamos fazer isso também, e o resultado seria a cena. Portanto, há uma série de maneiras diferentes, obviamente, para construir esses tipos de aplicativos. E dependendo dos valores que você está utilizando e da lógica que você está aplicando, isso é o que você usaria para construir. Foram aplicações. Então isso é o que eu quero fazer é criar na matriz com um monte de, hum, possíveis respostas aqui. E vamos dar um passo adiante e construir algumas perguntas adicionais porque com realmente apenas duas perguntas, bem, não é realmente tão útil. E não está realmente demonstrando todo o valor que está dentro deste tipo de aplicação. Então vamos fazer algo como verdadeiro ou falso, verdadeiro ou falso. E as respostas serão verdadeiras ou falsas. Eles só têm duas opções. Isso vai ser uma pergunta verdadeira ou falsa. O céu é azul e a resposta correta será zero. Vamos acrescentar outra pergunta aqui, como se soletra cinco e esta? Eu vou ter um. Eu tenho que, e de várias opções aqui, então ele vai colocar alguns espaços reservados lá e três para cinco. E a resposta correta para este será o quarto item em seu caminho, começando em zero. Vamos salvar-nos. E agora vamos voltar aos nossos dados aqui e eu vou utilizar a chamada para este novo valor do Jason e vamos voltar para o nosso teste. E espero que agora tenhamos outras perguntas adicionadas. Temos verdadeiro ou falso. Vamos ver como Mason ordenadamente é capaz de lidar com várias opções aqui, vários valores, e vemos que tudo ainda está funcionando corretamente. Então, aperte o próximo que devemos ver concluída. E este é o passo final de construir esse próximo, porque esta é a parte onde podemos fazer uma contagem, comparando as respostas deste saree com os valores que recebemos dentro do nosso objeto e ver o que está correto. Então lembre-se novamente que dentro desse objeto de dados que está sendo retornado, já temos todas as respostas, e sabemos quais são as respostas. Então agora tudo o que temos que fazer na página completa percorrer os dois, fazer uma comparação e ver se o usuário quantos destes eles têm, certo? Então vamos fazer isso na próxima lição 17. 18 Esconder a exibição de botões próximos e anteriores: Então neste neste eu quero passar e o que quer que seja, nós terminamos e terminamos o teste. Eu queria correr e executar um script de conclusão, nosso editor, e vamos criar mais uma função aqui. Nesta função, tudo o que vai fazer é contabilizar os totais. Talvez não precisemos necessariamente de fazer uma função. Nós provavelmente poderíamos fazer isso aqui dentro e terminar o teste e que poderíamos esconder ambos os botões para ir em frente e em seguida. Então vamos dar uma olhada nisso. E eso temos estes botões aqui e temos um I d. seguinte e um I d. anterior. Então vamos. Primeiro de tudo, vamos esconder esses botões, correr e ocultar esses botões para que não queiramos dar ao usuário a opção de ir em seguida uma vez concluída, porque isso continua jogando e erros e vamos simplesmente remova essa opção. Então, a fim de identificar isso, nós podemos obtê-lo por D. Então vamos apenas fazê-lo desta forma onde nós obtemos elemento por i d. e nós vamos adicionar algum estilo nele. Ou talvez seja ainda melhor criar uma função para fazer isso para que possamos executar através dessa função, e provavelmente esconderia e mostrar os botões conforme necessário. Então vamos criar uma função que vai ser esconder Show. E nós estamos indo apenas para executar e verificar os valores de Page. E a partir daí podemos esconder e mostrar os elementos conforme necessário. Então eu coloquei algumas condições aqui, e nós também vamos precisar de outra coisa. Então vamos número de maneiras diferentes de fazer isso. Mas vamos fazer isso no formato longo aqui, onde vamos fazer para o botão seguinte e vamos fazer estilo e este filé. E assim o 1º 1 que vamos fazer não mostra nenhum. E então eu tenho uma cópia, toda essa grande corda. Então talvez seja um veterano que ainda o colocou dentro de um objeto. Mas, por enquanto, vamos fazer assim. Eso Agora precisamos fazer uma comparação para ver se nós realmente completamos o valor do teste e vamos voltar. E aqui sabemos que sempre que atingimos concluído, vemos que este é um valor de três, e este foi novamente aquele valor para a página, e então nosso comprimento do objeto é três. Então precisamos ter certeza de ver se o comprimento do objeto é igual ao comprimento do meu objeto. Então vamos usar esse comprimento do objeto e se o comprimento do objeto é menor ou igual a, e vamos usar a mesma fórmula que tínhamos aqui. Então, se o comprimento do objeto é menor ou igual a página mais um, então nós vamos exibir nenhum no próximo. Caso contrário, vamos exibi-lo. Blocos de tipos. Vamos ver se isso funciona. Então, tudo está bom até agora, e então quando batemos concluído, então nossos valores são equivalentes lá, então não exatamente funcionando corretamente. Então vamos dar uma olhada e realmente removê-lo. Pensava que sim. Queremos ter certeza de que, uh, estamos fazendo um cálculo adequado aqui. Não é que isso não está funcionando é porque eu não estou realmente executando essa função. Então vamos adicionar essa função lá. Então, provavelmente, esse era o problema lá. Então você tem o próximo botão e, em seguida, vemos que ele desaparece quando vamos para completá-lo, e quando vamos anterior e deve aparecer novamente. Então ainda há um knish. Você aí, mas não estamos dirigindo esse show de esconderijo corretamente. Então talvez nós até precisamos trazer isso para fora, ou talvez até mesmo dois aqui, que cada vez que um desses botões é clicado, nós podemos ter certeza que nós temos que verificar os botões escondendo e mostrando e grosseiramente, nós precisa fazer um onde se estamos atingindo zero e o comprimento da página é zero do que se o comprimento da página é menor ou igual a zero. De repente, provavelmente somos o suficiente para fazer uma atualização sobre isso. Mas vamos verificar isso e ver como isso funciona. Então esse acabou bem, então agora estamos nos escondendo e mostrando os botões conforme necessário. Então isso é exatamente o que queríamos fazer. E agora os toques financeiros. Basta adicionar esse cálculo de conclusão em vez de ter que clicar em seguida aqui. Vamos remover este conteúdo aqui e mostrar algo para a parte concluída. Então, podemos facilmente fazer isso com inter html em. Eu só terminei. E é claro que podemos alternar isso também. Se não quisermos que as pessoas sejam capazes de voltar e clicar em qualquer um destes dois botões anteriores seguintes . Podemos removê-los também. Então lá vamos nós. Nós configuramos todos os botões concluídos, e agora estamos prontos para fazer nossos cálculos finais. Então, está chegando a próxima lição. 18. 19 Crie cartão de pontuação para questionário: quando o usuário concluir o questionário. Agora queremos produzir todo esse conteúdo aqui. Então vamos abrir algum espaço aqui dentro desta condição e fazer algo para os resultados do teste , torcer resultados. E em primeiro lugar, provavelmente vamos precisar de um loop através de alguns de nosso conteúdo aqui. Então vamos criar um loop aqui. E nós provavelmente podemos fazer um loop muito semelhante ao que fizemos aqui porque tudo o que precisamos fazer é obter todas as perguntas. Então vamos fazer um loop, talvez escolher uma variável diferente lá. Eu tentei W ou poderíamos fazer algo como item no objeto. E é aqui que precisamos aumentar para itens e objeto e não estamos fazendo respostas de página . Vamos ver o que acontece agora. Então, se eu fizer, eu colocaria aqui Vamos incrementá-lo. E lembre-se de novo que estamos procurando a resposta correta. Então este é o item ou o valor do índice e correto. Então, nós não estamos realmente looping essa matriz, Então nós temos 01004 Então esta é uma lista de todos os itens corretos dentro desse objeto para ver Nós temos correto. 1004 Então essas são todas as respostas corretas. Então agora tudo o que temos que fazer é fazer uma comparação entre as respostas que estão sendo mantidas dentro do array. E se eles estão combinando, então sabemos que o usuário tem a resposta certa. E se eles não estão combinando com ele e preenchendo qualquer coisa, então nós sabemos que eles têm a resposta errada. Então vamos atualizar isso um pouco. Crie algum espaçamento lá. Vou estranhar que era um espaço reservado. E então eu vou adicionar em uma quebra de linha Eso O que queremos fazer é manter este equivalente com o item tão realmente indexado. Mas se respondermos a esta, esta relva, esta, vamos ver o que temos aqui. Então temos os resultados um e zero. Aqui fizemos 0000 e 40 Então temos provavelmente alguns deles, correto. Podemos atualizá-lo. O céu é azul. Então isso é verdade. A grama é verde e a maçã é vermelha. Então vamos ver o que temos agora. Então agora temos todas as respostas, correto. Então, enquanto estes ar combinando, sabemos que temos a resposta está correta e queremos se queremos criar uma variável para pontuação ou algo assim vai começar pontuação em zero. E agora tudo o que precisamos fazer é apenas fazer uma condição. Então eu pedi a ele para fazer uma quebra de linha lá, e eu vou fazer uma condição aqui. Se isso for igual a isso, então pontuação é igual a pontuação mais um. E vamos também adicionar um golpe de falha. Então, com bootstrap, temos habilidade, Todd, nesses penhascos onde podemos fazer um círculo ou uma extensão. Então vamos adicionar esses. E alguma coisa foi montada então Cliff ou algo assim, então deixe isso em branco agora. E então aqui eu fiquei estranho no valor para o penhasco que queremos representar aqui, para ter certeza de ver se a pessoa tem as fendas certas ou erradas. Abra isso e adicione os penhascos para bootstrap. Então precisamos criar um valor lá e então mais. Então, se estiver errado, então o penhasco será em vez de um círculo O K, nós vamos fazer remover círculo, então ser atingido através do círculo então Agora, vamos dar uma olhada nisso e ver como isso está colocando. É claro que precisamos disso. Provavelmente ainda o estilo um pouco melhor e as botas caem. Mas, por enquanto, vamos ver como isso acaba. Então vemos que temos os resultados. Vimos qual é o correto? Correto, Correto e incorreto eso Podemos até adicionar cores se precisarmos. E vamos adicionar algo aqui no topo. Então, pode ser uma idéia melhor para segurar html ou algo assim e, em seguida, apenas deixar isso em branco. E em vez de adicionar no HTML interno, podemos apenas fazer esse titular. E, em seguida, aqui podemos adicionar 0,1 em. E isso nos dá a capacidade de fazer você marcou. Pontuação. Correto. E talvez se você quiser fazer isso como em cada um, então atualize que para ser menor caso s agora temos você marcado corretamente. E talvez queira colocar isso dentro de um mergulho. Uma ondulação. Parece um pouco melhor. Possivelmente, , vamos dar uma olhada nisso e adicionar um pouco de estilo aqui, e eu vou fazer isso todo o caminho Vamos tentar isso agora. Então este foi apenas um pouco mais de estilo. Eso, vamos ler pão. Falsa dizendo que provavelmente três lá. Então você marcou um. Correto. O Eso tem uma moeda extra lá, , escondida lá fora. Então isso foi de lá. Lá vai você. Então é assim que podemos criar esses testes na mosca. Pode até querer apresentar esses valores. Estes valores de retorno um pouco maiores também. Eso eu posso fazer algo onde eu posso tratar um div fora em uma classe para pontuação final em, em seguida, estão condenados. Outro def aqui na extremidade final do mesmo, e, em seguida, tomar esta pontuação final e aplicar algum estilo a ele. Então, classe e aqui talvez queremos fazer tamanho da fonte torná-lo maior. Tão grande lá, e assim por diante. Então, há algumas opções lá. Então vamos tentar este oito e ver se o nosso teste vai funcionar. E então lá vamos nós. Temos pontuação para corrigir. Vemos onde marcou, correto, e ficamos incorretos. E para tornar isso ainda mais interessante em vez de fazer esses valores, poderíamos fazer algo como pergunta e aqui poderíamos selecioná-lo. Essa resposta tão ponto no azul, ele sob respostas e, em seguida, Rappe que dentro desse valor e espero que isso acabe bem, então apenas tente que ele rapidamente para cima. Então havia definitivamente um problema lá com a forma como foi formatado. Então dê uma olhada rápida nisso. E então esse era, uh esse era o número do item que estava sendo representado. Há O Este era o valor das respostas. Só estou olhando para baixo e vendo Talvez precisemos analisar isso como um inteiro. E o problema na verdade é porque eu tenho uma pergunta lá dentro. Então eu não preciso disso porque eu estou procurando respostas para que eu possa remover essas partes como um inteiro também. Tente aquele oito. E vamos verificar o cofre para ver se está funcionando. Então, atualize. Então agora temos que cor é uma resposta de maçã. E se é certo ou errado, que cor é grama verde, certo ou errado e assim por diante. Então, isso dá ao usuário um scorecard real para ver como eles se saíram dentro do questionário 19. Quiz dinâmico JavaScript do projeto 20 finalizar o risco: Então, esta lição. Quero mostrar a vocês como podemos brincar um pouco com o código-fonte que acabamos de criar nesta lição e como isso é transferível. Então você pode usar sites como o meu Jason dot com, a fim de criar seu próprio conjunto de perguntas. Ou você pode criar suas próprias perguntas em seu servidor dinamicamente e formatado como Jason. Então, a fim de obter o questionário para montagem de trabalho. Então vamos dar uma olhada e transferir tudo isso para o formato utilizável na caneta de código. E este, claro, este é um ótimo lugar para praticar o casaco também. Então eu estou pegando todo esse código aqui, e nós vamos ter que vincular ao Bootstrap, tirar esse conteúdo do contêiner. E a maneira como funciona a caneta de código é que ele realmente divide que HTML CSS e JavaScript para que ele automaticamente se vincula a um arquivos JavaScript. É por isso que eu não estou incluindo tudo isso e as informações de cabeçalho para o HTML já estão lá. Então nós não necessariamente incluímos isso. Eu também posso removê-lo. Algumas dessas coisas comentaram aqui, mas eu vou mantê-lo no repositório de caneta de código. Então, no caso de você querer dar uma olhada nele porque nós temos referenciado através do curso também. Então vamos guardar isso. E por último, eu preciso de link para um CSS externo, que é bootstrap para receber e roupas. E lá vamos nós. Então agora temos mais bootstrapped formatado formato eso. Agora podemos ver que cor grama, verdadeira e assim por diante. E então temos os resultados aqui, então podemos querer fazer algo onde estamos colocando esses resultados, apresentando-os aos usuários de forma diferente. Então tudo depende de como queremos como queremos produzi-los. Então talvez o que queremos fazer é criar uma nova linha aqui. Então, quando estamos colocando as respostas estavam passando por todas as respostas disponíveis. Podemos querer simplesmente fazer isso direito, Alec, Alec, ou mudar fontes diferentes ou algo assim, a fim de indicar que esta é a questão para que eu possa fazer algo como eu e eu e também talvez fazer uma quebra de linha lá dentro. Então, de novo, há maneiras diferentes de representar isso. E vamos experimentá-lo. Então, que cor é um vermelho maçã. Isso é correto. Que cor é grama vermelho incorreto céu azul Então eu O céu é azul Eu coloquei falso E então nós vemos que nós temos onde nós temos as correções pode voltar e ver que ele automaticamente ajustar e atualiza conforme necessário S Então isso é essencialmente assim que você pode construir uma aplicação a partir do zero usando JavaScript, arquivo Jason fazendo uma chamada Ajax para obter esses dados e utilizando o conteúdo dom e, no final, construindo a aplicação utilizável. E toda a ideia aqui é, quando estamos construindo esses aplicativos, queremos torná-los o mais versáteis e utilizáveis possível. Então foi aí que vimos no início do teste onde no início do curso quando criamos um Jace em arquivo e eu poderia atualizar e realmente facilmente criar outro arquivo Jason e simplesmente ligado a esse em vez disso e vimos como era realmente fácil criar esses questionários em tempo real e para ser capaz de marcar e mostrar os resultados, apresentar os resultados para o usuário eso novamente, Eu encorajo você a verificar o código-fonte por si mesmo. Ele é fornecido dentro do curso tentou por si mesmo. Experimente variações diferentes. E à medida que passamos por diferentes lições, eu tentei indicar maneiras diferentes de fazer as coisas. É por isso que algumas das coisas que eu construí então nós rastreamos algumas delas. Então eu tenho que eu incluí isso também. Então porque, é claro, você pode querer algumas variações. Deixei isso aqui para ver que, se o resultado estiver correto, ou se estiver incorreto para que você possa ter uma janela pop-up, você pode fazer um monte de coisas agora dentro apenas do código fornecido aqui e também aplicando sua própria lógica e construindo suas próprias versões deste código. Eso eu realmente espero que você gosta de praticar em experimentá-lo por si mesmo e sinta-se livre para postar links para suas versões do código e ver o que você pode fazer acontecer. Criando um questionário baseado em JavaScript