!!!! PRESIDÊNCIA DA REPÚBLICA SECRETARIA-GERAL Secretaria-Executiva. de postagens. Local e data: Brasília/DF, de de 2014

Transcrição

1 PRESIDÊNCIA DA REPÚBLICA SECRETARIA-GERAL Secretaria-Executiva Projeto PNUD BRA/12/018 Documento com os exemplos do kit mídias para o aplicativo de consulta contendo definições, orientações e códigos; e compilado das propostas de conteúdos a serem produzidos durante a utilização do aplicativo de consulta, contendo orientações e exemplos Consultor (a): Fabiano Rangel Cidade Contrato no.: 2013/ Produto / nº : 06 Assinatura do Consultor de postagens. Local e data: Brasília/DF, de de 2014 Assinatura do Consultor: Aprovação do Supervisor Atesto que os serviços foram prestados conforme estabelecido no Contrato de Consultoria. Local e data: Brasília/DF, de de 2014 Assinatura e Carimbo:

2 Sumário 1. INTRODUÇÃO 3 2. DESENVOLVIMENTO Documento com exemplo do Kit mídia para o aplicativo de consulta Definição do Aplicativo de Consulta Pública Orientação do Aplicativo Exemplo de Códigos Compilado das propostas de conteúdo durante a utilização do aplicativo de consulta Orientação para votação Exemplo de Postagem Uso do kit de mídias para disseminação Resultado da Consulta CONCLUSÃO 70 BIBLIOGRAFIA 71

3 1. Introdução O Participa.br ou Portal Federal de Participação Social se baseia no princípio das comunidades e rede social para a participação. Nesse aspecto existe uma preocupação que as estratégias e metodologias abordem não somente a realização da consulta ou oportunidade de participação propriamente dita, mas que possam estar baseadas na lógica da linguagem e mobilização em redes sociais e blogs. Dentro da necessidade de captação de opinião da sociedade de forma rápida e massificada para alguns processos, se fez necessária a criação de uma ferramenta para coletar dados e opiniões dos usuários da rede. Partindo do princípio de que é responsabilidade dos gestores da consulta pública mobilizar o máximo possível para a participação, o objeto desse produto atinge justamente esse ponto: quais são os instrumentos para essa mobilização e os exemplos utilizados na consulta pública do NETmundial. Esta solução foi implementada e utilizada em uma consulta pública aberta pela Secretaria Geral da Presidência da República (SG-PR) e foi lançada durante um bate-papo virtual sobre o tema. O secretário de Política de Informática do Ministério da Ciência, Tecnologia e Inovação (MCTI), Virgilio Almeida e o Diretor de Participação Social, Pedro Pontual, participaram do encontro de lançamento da consulta pública, que ocorreu no Anexo do Palácio do Planalto e reuniu blogueiros, jornalistas, especialistas em internet, músicos e representantes do governo brasileiro. As questões escolhidas durante a consulta pública fizeram parte de uma carta proposta que foi entregue aos coordenadores e participantes da conferência NETmundial, que ocorreu em São Paulo, nos dias 23 e 24 de abril. Capa do resultado da Consulta Pública Ato de entrega do relatório para a presidenta Dilma no evento ARENA NETmundial 3

4 O resultado da consulta pública será divulgado durante o evento NETmundial, atividade aberta ao público que ocorrerá em paralelo a conferência, no Centro Cultural São Paulo, entre 22 e 24 de abril. No espaço haverá mesas livres de debates entre representantes do governo brasileiro e a sociedade civil, atividades culturais, mobilização e comunicação digital. A programação será transmitida pela internet através de Streaming (transmissão ao vivo). 2. Desenvolvimento O desenvolvimento da solução de consulta pública foi realizado com base em uma plataforma disponível ao público através do projeto All Our Ideas (allourideas.org) e sendo que esta já foi utilizada por outro consultor PNUD anteriormente no Rio grande do Sul. O trabalho realizado foi uma adaptação visual e funcional do sistema, com a finalidade de atender as necessidades da consulta para captar as ideias e colaborações dos usuários participantes do portal de participação social. Para esta adaptação, foi utilizado o software Adobe Photoshop que se caracteriza como editor de imagens bidimensionais do tipo raster desenvolvido pela Adobe Systems. A versão utilizada foi a Adobe Photoshop CC (Creative Cloud), que corresponde a décima quarta edição do software. O sistema utilizado foi Mac OS X Mavericks, mas o programa pode ser instalado em Windows e Linux (através da camada de compatibilidade Wine). A fim de facilitar a identificação do público com os portais ligados ao governo federal, a equipe de desenvolvimento web do Participa.br equilibrou a estrutura visual da solução de consulta pública de acordo com o padrão estabelecido e as peculiaridades da Secretaria-Geral da Presidência da República. Sempre com o foco no público, a padronização foi intencional para que o cidadão não tenha dificuldade em conseguir informações ao acessar as informações e participar da votação. Além da facilidade de acesso, acredita-se que a solução, pode ser implantado em diversos órgãos, sites e blogs através de códigos de incorporação. Segundo o Decreto de Lei no 5.296, de 2004, que torna obrigatória a implementação dos critérios de acessibilidade em portais para atender as pessoas com deficiência, o Participa.br implantou, na página principal, um local destinado a acessibilidade, que permite inserir esse público às ações desenvolvidas e trabalhadas pelo governo federal. A solução de consulta pública foi criada com uma estrutura reutilizável, ou seja, pode ser aplicada novamente no site, blogs, sites e orgãos. Dessa forma não é preciso investir em uma nova arquitetura e criação, podendo reaproveitar as ferramentas já organizadas e pré-formatadas. Para impulsionar as contribuições, uma campanha de divulgação no Facebook e Blogs parceiros do governo com a finalidade de massificar as contribuições da consulta pública foi criada. Essa campanha teve resultados bem positivos embora tenha tido apenas três dias de veiculação. Obtivemos mais de 14 milhões de impactos, 50 mil cliques e mais de 22 mil acessos à página. O 4

5 Facebook foi nosso principal veículo nessa campanha de divulgação e entregou o maior número de cliques e acessos. As artes de divulgação da campanha foram criadas pelo consultor de design web do Participa e validadas pela SECOM - Secretaria-Geral da Presidência da República. Nestas artes foi necessário seguir o padrão estabelecido pela ferramenta de divulgação do Facebook onde criamos 3 imagens de divulgação da consulta pública com textos de chamada de até 90 caracteres, título com 25 caracteres e a imagem com as dimensões de 1200x627 pixels com até 20% de texto no interior. Para calcular o tamanho de 20% de texto, utilizou-se a ferramenta oferecida pelo próprio Facebook Anúncios com mais de 20% de texto na imagem não são aprovados para veiculação no Feed de notícias do Facebook. O excesso de texto pode parecer spam e fazer com que as pessoas acreditem que seu anúncio seja de baixa qualidade. Deve-se certificar-se de usar o título e o corpo do seu anúncio para fornecer às pessoas mais informações sobre o propósito do anúncio e que ação deseja que elas realizem. Nos demais blogs e sites parceiros, criamos 2 banners com tamanhos diferentes, sendo um com as dimensões de 300x250 pixels e outro de 728x90 pixels com peso de imagem de até 100kb com até 12 segundo de animação. Outras artes foram concebidas com a finalidade de divulgação da consulta pública, tais como imagens com o tamanho de 808x808 pixels, 404x404 pixels para publicação de posts de convite para participação e contribuição. Algumas artes de capa para o Facebook foram concebidas para enfatizar a possibilidade de contribuições, sendo essas imagens no tamanho de 851x315 pixels. Para obter a máxima rapidez de carregamento da Fanpage do Participa.br, o peso da imagens foi menor que 100kb, no formato srgb onde inserimos uma pequena frase de chamada enviada pelas consultoras de jornalismo da equipe Participa.br. 5

6 2.1 Documento com exemplo do Kit mídia para o aplicativo de consulta Apresentação visual da ferramenta de Consulta Pública Descritivo de cada opção de funcionalidade da ferramenta: 1. No bloco apresenta-se o número da pergunta e título da pergunta em consulta pública; 2. Esta seta apresenta a funcionalidade de efeito sanfona, isto é, o usuário pode clicar na seta para expandir ou minimizar o seu conteúdo. Esta opção foi implementada pois na capa do site Participa.br se fez necessária a visualização de 3 perguntas em paralelo. 3. A aba Votação onde a pessoa poderá clicar nas opções para participar e contribuir com a consulta; 4. A aba Ver Resultados permite os usuários o acompanhamento das participações, onde pode-se visualizar as opções mais votadas e menos votadas; 5. A aba Sobre a votação é um texto informativo sobre a pergunta em questão; 6

7 6. Pergunta da consulta pública; 7. Texto de apoio a consulta, sendo uma orientação aos usuários; 8. Texto descritivo da opção de votação; 9. Botão de link para votar na opção desejada; 10. Apresentação visual quando o usuário coloca o mouse sobre a opção, isto é, a apresentação visual muda para dar foco na opção de seleção do usuário; 11. O botão Não consigo decidir é utilizado quando o usuário não tem certeza de qual opção selecionar. No momento em que o usuário clica nesta opção, as duas opções que podiam ser escolhidas mudam, isto é, novas opções são disponibilizadas; 12. Neste campo o usuário pode sugerir um texto novo, sendo que todas as contribuições são avaliadas pelos gestores responsáveis pelo projeto e 13. Botão para enviar a sugestão de ideia. Observações sobre o Design Para a apresentação de todo o conteúdo das novas funcionalidades do Participa.br, somente duas fontes são utilizadas. São elas: Open Sans & Arial 7

8 Open Sans (Google Fonts) Link para baixar a fonte Open sans: Arial Fonte padrão de computadores. 8

9 A decisão pela escolha das duas fontes foi tomada a fim de trazer harmonia, padronização, conforto na leitura e acessibilidade. Enquanto a Open Sans tem um desenho mais suave, com um desenho mais aberto e com hastes que afinam nas junções, a Arial tem um desenho mais pesado, com menor desproporção entre hastes verticais e horizontais e com letras mais fechadas. As duas fontes são classificadas como sem serifa. Este conjunto de tipos possui caracteres com hastes simples, sem nenhum tipo de ornamento. Exemplos de tipos: Helvetica, Arial, Futura, Gill Sans, Univers, Frutiger e outras. Paleta de cores Para apresentar a imagem do Governo Federal a partir de uma identidade única e fornecer maior articulação aos órgãos, foi desenvolvida uma paleta de cores derivadas de signos nacionais, tais como a Bandeira Nacional, os brasões, insígnias, entre outros. A seguir serão dispostos os discos cromáticos (paletas de cores), com suas derivações, complementos e recomendações. A cor exerce um papel fundamental ao exprimir a atmosfera do Governo Federal. Ela contém, subjetivamente, um código 9

10 cultural, que ressalta a importância dos signos brasileiros. A paleta foi desenvolvida sob os parâmetros de acessibilidade expostos no e-mag. As variações e combinações propostas podem ser intercaladas e usadas de diferentes formas, desde que estejam sempre de acordo com as instruções de acessibilidade do manual. A percepção de cor depende não apenas da pigmentação das superfícies em si, como também da intensidade e do tipo de tom aplicados a ela. Esses fatores são determinantes no uso de degradês e contrastes. Dessa forma, sugere-se aplicar sempre o maior contraste possível sem que se perca a riqueza cromática da paleta. O disco principal possui as quatro cores da bandeira, sem ordem de prioridade nem escala de uso. Ela deve ser usada como principal referência na hora de escolher o tema a ser utilizado. É possível combinar as quatro cores entre si. No entanto, sugere-se que não sejam usadas sempre juntas, possibilitando assim uma maior aderência e discernimento dentro do portal. Para facilitar a escolha, foi selecionado um conjunto de duas cores complementares para cada matiz. Elas podem ser seguidas nessa orientação, ou invertidas quando necessário. 10

11 Para fins de efeitos de profundidade, luminância, ornamentações e combinações, as graduações das cores da paleta podem ser alteradas em sua claridade, intensidade e saturação, conforme exemplos abaixo. 11

12 12

13 Exemplos de aplicação. 13

14 Download de imagens vetorizadas A imagens vetorizadas da ferramenta de consulta pública estão disponíveis para download através do link Dropbox IaavN9L2n8w7yS5aQB-a e anexo em CD no produto. 2.2 Definição do Aplicativo de Consulta Pública A Secretaria-Geral da Presidência da República realizou consulta pública para saber o que a sociedade acha importante sobre o futuro da internet. Do dia 20 de março ao dia 17 de abril, qualquer pessoa pôde votar. O resultado, serviu de base para definir direitos e princípios fundamentais para garantir o futuro democrático e orientar a governança na internet, debatidos na conferência NETmundial Durante a consulta, que contou com três perguntas, as pessoas puderam escolher a que mais se identifica ou votar em todas, não houve limite de votos. Bastava clicar na questão e um par de propostas estava disponível para escolha. Além disso, os participantes também puderam elaborar e enviar novas propostas. As questões escolhidas durante a consulta fizeram parte de uma Carta Proposta. O documento, elaborado pela sociedade brasileira será entregue aos coordenadores e participantes do NET mundial para que incorporem as sugestões da população. Os autores das 15 ideias priorizadas pela votação participaram do NETmundial - maior evento mundial sobre governança da internet, em São Paulo, dias 23 e 24 de abril - através do espaço HUB Brasil, para discutir suas ideias com especialistas internacionais. Links rápidos para os resultados: 1) Que internet você quer? 2) Quais direitos você considera fundamentais para garantir o futuro democrático da Internet? 3) Quais princípios devem orientar a governança da Internet? 2.3 Orientação do Aplicativo Diversas questões foram consideradas na escolha da metodologia para a consulta. Com o desafio de massificar o máximo possível as participações, foi necessário pensar tanto o design da ferramenta quanto o kit de mobilização de forma a atender esses objetivos. 14

15 Para a construção da Interface visual, isto é, a ilustração abaixo instrui os desenvolvedores para estruturar a codificação Cascading Style Sheets (ou simplesmente CSS) que é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento. Com a necessidade de apresentação de 3 perguntas na consulta pública, a implementação de uma funcionalidade de efeito sanfona se fez necessária. Na barra amarela na figura abaixo, existe em forma de link na área completa, seguida de um ícone de seta no canto direito, onde controla-se a funcionalidade de minimizar os dados e maximizar as informações da consulta. Com um simples clique, os visitantes pode apresentar ou esconder as informações de cada pergunta. Caso o usuário clique em uma pergunta na cor verde por exemplo, a pergunta fica selecionada na cor amarela e a pergunta anteriormente selecionada muda para a cor verde. Uma única pergunta pode ficar selecionada e exibindo as informações, com isso as outras perguntas ficam escondidas com a cor verde, ou seja, desmarcadas para leitura de seu conteúdo. 15

16 A metodologia utilizada para a consulta chama-se wiki-survey. A ferramenta foi desenvolvida na Universidade de Princeton com o intuito de trabalhar da melhor maneira a cultura da internet. A sua principal característica é a capacidade de articular votação e coleta de opiniões de forma eficiente. A votação em pares permite que somente duas propostas sejam avaliadas a cada interação na ferramenta, sorteadas de forma aleatória entre todas as opções disponíveis. A cada voto, uma proposta é priorizada em detrimento da outra, somando pontos em uma escala que pode variar de 0 a 100. A pontuação traduz a probabilidade de cada ideia vencer um embate aleatório na disputa de pares. Não há limite no número de votos por usuário já que a possibilidade de provocar desvios e manipular o resultado é irrelevante em face do sorteio. Se o participante não concordar com as duas propostas sorteadas ou não souber responder, ele pode pular para um próximo par, sem prejuízo. As ideias que vencem o maior número de turnos tomam o topo da lista, refletindo a média da opinião pública engajada no processo. A plataforma está disponível ao público através do projeto All Our Ideas (allourideas.org) e já foi utilizada em mais de 3,5 mil consultas em todo o mundo, incluindo Nova Iorque, Nações Unidas e o Governo do Estado do Rio grande do Sul. O processo de priorização de propostas é calculado a partir do score que cada proposta recebe a partir da votação. A metodologia é baseada na plataforma PairWise e All Our Ideias, cujas propostas iniciam com 50 pontos e podem chegar no máximo a 100 pontos (mais priorizada) e no mínimo a 0 pontos (menos priorizada). Mais detalhes sobre o método de escolha e votação podem ser conferidos em As propostas foram mediadas pela Secretaria-Geral da Presidência da República. O prazo de publicação de uma proposta é de, no máximo, 48h. Não foram validadas propostas que contivessem os seguintes conteúdos: a) conteúdo ofensivo, palavras de baixo calão; b) conteúdo proveniente de Spams ou correntes da internet sem referência ao tema consultado; c) propaganda que configure alguma relação político-partidária ou eleitoral; d) citações à empresas privadas ou qualquer marca que também configure propaganda. e) conteúdo preconceituoso (religião, gênero ou outros); f) que não se enquadrem dentro dos eixos temáticos da consulta pública. A depender da semelhança, as propostas enviadas poderiam ser agrupadas, preservando o texto da proposta mais antiga ou uma terceira redação será elaborada pela equipe de mediação da Secretaria- Geral da Presidência. Isso acabou não sendo feito pois o próprio desenrolar da consulta mostrou que a metodologia conseguiu cuidar eficientemente dessa mediação a partir dos próprios participantes da consulta. Contudo, o participante declara, desde já, ser de sua autoria as propostas enviadas. Também transfere para a Secretaria-Geral da Presidência da República os direitos de utilização, publicação e reprodução. 16

17 A participação na consulta ficou aberta a todos os nascidos no território brasileiro. Os participantes menores de 18 anos que tivessem suas propostas entre as mais priorizadas, teriam que comparecer acompanhados de seus pais ou responsável. 2.4 Exemplo de Códigos Código HTML <DOCTYPE html> <html lang='en' xml:lang='en' xmlns=' <head> <meta content='text/html;charset=utf-8' http-equiv='content-type' /> <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> <meta content='o que deve ter no ambiente do Participa.br até julho?' property='og:title' /> 17

18 <meta name="keywords" content="ideation, online suggestion box, open source suggestion box, crowdsourcing ideas, social suggestion, idea comparison, prioritize ideas, nonprofit, free idea management" /> <meta content='all Our Ideas is a platform that enables groups to collect and prioritize ideas in a transparent, democratic, and bottom-up way. It s a suggestion box for the digital age.' name='description' /> <meta content='all Our Ideas is a platform that enables groups to collect and prioritize ideas in a transparent, democratic, and bottom-up way. It s a suggestion box for the digital age.' property='og:description' /> <meta content=' property='og:image' / > <meta content='width=device-width, initial-scale=1.0' name='viewport' /> <meta property="og:site_name" content="all Our Ideas"/> <link href=' rel='shortcut icon' /> <title>all Our Ideas - Uma Caixa de Sugestões para a Era Digital</title> <link href="/stylesheets/glyphicon.css? " media="screen" rel="stylesheet" type="text/ css" /> <link href="/stylesheets/flexslider/flexslider.css? " media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/styles.css? " media="screen" rel="stylesheet" type="text/css" /> <link href="/stylesheets/screen.css? " media="screen" rel="stylesheet" type="text/css" / > <link rel="stylesheet" href=" jquery-ui.css" type="text/css" media="all" /> <link href="/stylesheets/ui.theme.css? " media="all" rel="stylesheet" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></ script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/jquery-ui.min.js" type="text/ javascript"></script> <script src="/javascripts/jquery.corner.js? " type="text/javascript"></script> <script src="/javascripts/jquery.blockui.js? " type="text/javascript"></script> <script type='text/javascript'> $(document).ready(function() { $('#request_error').on('hide', function() { window.location.reload(false); }); // Test if we can set and read cookies. // If we can't, then the browser probably has 3rd party cookies disabled // unless the user has first navigated to the domain serving the iframe source. var cookievalue = "cookietest" + new Date().getTime(); document.cookie = "cookietest="+cookievalue; if (document.cookie.indexof("cookietest="+cookievalue) === -1) { var cookies_failed = document.getelementbyid('cookies-failed'); if (cookies_failed) { cookies_failed.style.display = 'block'; var img = new Image(); 18

19 img.src = '/cookies_blocked.gif? question_id=4325&session_id=a8e51339f4ff17fd8270c82688e247dd&referrer=' + encodeuricomponent(document.referrer); } } else { // cleanup test cookie document.cookie = 'cookietest=; expires=thu, 01 Jan :00:01 GMT;'; } $('.rounded').corner('5px'); $('.firsttime').fadein(2000) $('.firsttime, #close,.vote_cell').bind("click", function() { $(".firsttime").fadeout(500); }); var loadedtime = new Date(); var rootpath = "/"; handle_history_events = function(event){ var left_side_text = $('#left_side_text').val(); var right_side_text = $('#right_side_text').val(); // This only takes effect if the page is loaded from back or forward buttons if(left_side_text && left_side_text = "blank_history" && left_side_text = $('.leftside').html()){ $('.leftside').html(left_side_text) } if(right_side_text && right_side_text = "blank_history" && right_side_text = $ ('.rightside').html()){ $('.rightside').html(right_side_text) } } handle_history_events(); $('#the_add_box.new_idea_field').jqeasycounter({target: '#the_add_box.new_idea_counter'}); $('#the_add_box button').hide(); $('#the_add_box').on('focus', 'textarea', function(ev) { $('#the_add_box button').show(); $('#the_add_box.new_idea_counter').show(); }); $('#the_add_box').on('blur', 'textarea', function(ev) { if ($.trim($(ev.currenttarget).val()).length === 0) { $('#the_add_box button').fadeout(); } $('#the_add_box.new_idea_counter').fadeout(); }); // allow enter to add idea 19

20 $('#the_add_box').on('keypress', 'textarea', function(ev) { $('#the_add_box button').show(); if (ev.which == 13) { ev.preventdefault(); $('#the_add_box button').click(); } }); // handle submit on add new idea box $('#the_add_box').on('click', 'button', function(ev) { ev.preventdefault(); var button = $(ev.currenttarget); button.addclass('disabled'); var box = $(ev.delegatetarget); var new_idea = box.find('.new_idea_field').val(); var default_text = $('#default_text').val(); var question_id = button.data("question_id"); $('.example_notice').hide(); // verify new idea is not blank, default or longer than 140 characters if (new_idea == 'Add your own idea here...' new_idea == '' new_idea == default_text) { alert('desculpe, ideias em branco não são permitidas.'); return; } if (new_idea.length > 140) { alert('desculpe, a ideia precisa ter menos de 140 caracteres.'); return; } $('.tellmearea').html(''); var data = {authenticity_token : AUTH_TOKEN, new_idea: new_idea, appearance_lookup: $ ('#appearance_lookup').val()}; var url = rootpath + 'questions/' + question_id + '/add_idea.js?locale=pt'; $.post(url, data, function(data){ button.removeclass('disabled'); // keypress is for counter $('#new_idea_field').val('').show().keypress().blur(); var responsetext = ''; if (data['choice_status'] == 'active') { responsetext = 'Obrigado Sua ideia foi adicionada. Por favor, adicione mais algumas.'; current_item_count = $('#item_count').html(); $('#item_count').html(increment(current_item_count)); } else { responsetext = 'Sua idéia foi apresentada para a revisão. Ele aparecerá em breve.'; } 20

21 box.find('.idea-success p').html(responsetext); box.find('.idea-success').show(); settimeout(function() { box.find('.idea-success').hide(300); }, 5 * 1000); }, "json").fail(function() { $('#request_error').modal('show'); }); }); // creates new idea vote buttons and slide them in, while // sliding out the old idea vote buttons function loadnewprompts(data) { var oldleftdiv = $('.leftside.btn-vote-idea').closest('div'); var oldrightdiv = $('.rightside.btn-vote-idea').closest('div'); var newleftdiv = oldleftdiv.clone(true).hide(); var newrightdiv = oldrightdiv.clone(true).hide(); var newleft = newleftdiv.find('.btn-vote-idea'); var newright = newrightdiv.find('.btn-vote-idea'); var bothnew = newleft.add(newright); bothnew.addclass('btn-primary').removeclass('btn-success').removeclass('disabled'); newleft.html(data.newleft); newright.html(data.newright); newleft.data('choice_id', data.left_choice_id); newleft.data('choice_url', data.left_choice_url); newright.data('choice_id', data.right_choice_id); newright.data('choice_url', data.right_choice_url); newleftdiv.insertbefore(oldleftdiv); newrightdiv.insertbefore(oldrightdiv); // update can't decide options $('.cd_options.leftside em').html(data.newleft); $('.cd_options.rightside em').html(data.newright); //used for fraud detection / back button behavior fixing $('#left_side_text').val(data.newleft); $('#right_side_text').val(data.newright); // animation for sliding in / out choices newleftdiv.add(newrightdiv).slidedown(); oldleftdiv.add(oldrightdiv).slideup(function() { $(this).remove(); }); 21

22 } $('.votebox').on('click', '.btn-vote-idea', function(event){ event.preventdefault(); var winninglink = $(event.currenttarget); // return early if disabled or not btn-primary if (winninglink.not('.disabled').is('.btn-primary')) { return; } var losinglink = winninglink.closest('.votebox').find('.btn-vote-idea').not(winninglink); var winningside = winninglink.data('side').replace('side', ''); winninglink.removeclass('btn-primary').addclass('btn-success').addclass('disabled'); losinglink.removeclass('btn-primary').addclass('disabled'); var currenttime = new Date(); var time_viewed = currenttime - loadedtime var the_locale = "pt" var question_id = winninglink.data("question_id"); var prompt_id = $('#prompt_id').val() var appearance_lookup = $('#appearance_lookup').val() $('.tellmearea').html(''); $.ajax({ type: "post", url: rootpath + 'questions/' + question_id + '/prompts/' + prompt_id + '/vote.js' + '?locale=' + the_locale, datatype: "json", timeout: 10000, data: { 'authenticity_token' : AUTH_TOKEN, 'time_viewed' : time_viewed, 'prompt_id': prompt_id, 'appearance_lookup': appearance_lookup, 'direction' : winningside }, error: function(request,error) { winninglink.addclass('btn-primary').removeclass('btn-success').removeclass('disabled'); losinglink.addclass('btn-primary').removeclass('disabled'); $('#request_error').modal('show'); loadedtime = new Date(); //reset loaded time }, success: function(data){ 22

23 loadnewprompts(data); $('#prompt_id').val(data["prompt_id"]); $('#appearance_lookup').val(data["appearance_lookup"]); current_vote_count = $('#votes_count').html(); $('#votes_count').html(increment(current_vote_count)); loadedtime = new Date(); //reset loaded time }// End success }); // End ajax method }); // handle can't decide click $('#cant_decide_options').on('click', 'button', function(ev) { ev.preventdefault(); var target = $(ev.currenttarget); var reason = target.data('reason'); var question_id = target.data("questionid"); if (reason question_id) { return; } $('.btn-vote-idea').addclass('disabled'); var time_viewed = (new Date()) - loadedtime var prompt_id = $('#prompt_id').val() var appearance_lookup = $('#appearance_lookup').val() $('.example_notice').hide(); $('.tellmearea').html(''); $.blockui({ message: null, fadein: 0, fadeout: 0, overlaycss: { backgroundcolor: '#000', opacity: 0.0 }}); var postdata = { 'authenticity_token' : AUTH_TOKEN, 'cant_decide_reason' : reason, 'time_viewed' : time_viewed, 'appearance_lookup': appearance_lookup }; var url = rootpath + 'questions/' + question_id + '/prompts/' + prompt_id + '/skip.js' + '? locale=pt'; $.post(url, postdata, function(data) { $.unblockui(); loadnewprompts(data); $('#prompt_id').val(data["prompt_id"]); $('#appearance_lookup').val(data["appearance_lookup"]); 23

24 //clear the radio buttons somehow? loadedtime = new Date() //reset loaded time },"json").fail(function() { $('#request_error').modal('show'); });; }); // handle flag inappropriate clicks // flag_side is used later on submit to determine which choice // is being marked as inappropriate var flag_side = null; $('.flag_link').click(function(ev) { ev.preventdefault(); flag_side = $(this).attr('id'); $('#flag_inappropriate textarea').val(''); }); $('#flag_inappropriate').on('click', 'button', function(ev) { var user_text = null; user_text = $('#flag_inappropriate textarea').val(); if (user_text) { alert("you must include an explanation"); return; } $('#flag_inappropriate').modal('hide'); var time_viewed = (new Date()) - loadedtime var prompt_id = $('#prompt_id').val(); var appearance_lookup = $('#appearance_lookup').val(); var question_id = $(ev.currenttarget).data('question_id'); $('.btn-vote-idea').addclass('disabled'); $('.example_notice').hide(); $('.tellmearea').html(''); $.blockui({ message: null, fadein: 0, fadeout: 0, overlaycss: { backgroundcolor: '#000', opacity: 0.0 }}); var url = rootpath + 'questions/' + question_id + '/prompts/' + prompt_id + '/flag.js'+ '?locale=pt'; var postdata = { 'authenticity_token' : AUTH_TOKEN, 'flag_reason' : user_text, 'time_viewed' : time_viewed, 'side': flag_side, 'appearance_lookup': appearance_lookup 24