Ir para conteúdo
Fórum Script Brasil
  • 0

Leitura Dinâmica

Vagner Nunes

Perguntado por Vagner Nunes,

 Share

Pergunta

Vagner Nunes

Vagner Nunes

Postado
Postado

Prezados,

Uma boa tarde a todos...

Estou desenvolvendo um site para um cliente, e ele me solicitou, uma forma de quando uma pessoa abrir um artigo grande para leitura, e de acordo que a página é aberta, e em fração de segundos, e destacando em amarelo o texto, em três grupos de palavras, até o final do artigo.

Ex.:

A página abrirá um texto gravado no banco MySQL (já está pronto) e ao abrir destacando as palavras em grupo de três palavras. E se possível, ter uma forma de aumentar a velocidade desta marcação para a pessoa desenvolver a leitura com uma maior velocidade.

Não sei se posso fazer isso é PHP ou Javascript, alguém poderia me ajudar neste sentindo.

Sds,

Vagner Nunes

Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

  • 0
Vagner Nunes

Vagner Nunes

Postado
  • Autor
Postado

Prezados,

Em relação a esse sistema de Leitura dinâmica, que estava querendo, achei um JavaScript que seria mais ou menos o que estou querendo, mas o problema é que ele seleciona grupo de palavras, mas gostaria que ele selecionasse um grupo por linha, e não continuasse a seleção na linha de baixo. E também tem como fazer ele funciona sem ser em um Textarea.

Veja: http://www.gouarts.com/Scripts/ditador.htm

Segue arquivos:

Página

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">



    
    <title>Leitura Dinamica</title>
    
    <link rel="stylesheet" href="ditador_arquivos/style.css">
    
    <script src="ditador_arquivos/jquery.js"></script>
    <script src="ditador_arquivos/jquery-ui-slider.js"></script>

    <script type="text/javascript" src="ditador_arquivos/jscolor.js"></script>
    
    <script src="ditador_arquivos/rsvp.js"></script>
    <script src="ditador_arquivos/pagespecific.js"></script>

    <link type="text/css" href="ditador_arquivos/style_002.css" rel="stylesheet">
    <script src="ditador_arquivos/script.js" type="text/javascript"></script>
    <script type="text/javascript">
        function submitRating(evt)
        {
            var tmp = evt.target.getAttribute('id').substr(5);
            var widgetId = tmp.substr(0, tmp.indexOf('_'));
            var starNbr = tmp.substr(tmp.indexOf('_')+1);
            $.get("./feedback.php",
               { ratingID: widgetId, ratingValue: starNbr},
               function(data){
                 $(".rating_stars").html("Thank you!");
               }
             );
        }

    function jqueryInit()
    {
        init_rating();
        $('span.rating_stars img').bind('click', submitRating);
    }
    
    $(document).ready(jqueryInit);
    
    function openFeedbackForm(){
        $("#feedback_div").show();
    }
    
    function hideFeedbackForm(){
        $("#feedback_div").hide();
    }
    
    function submitFeedback(){
        $.get("./feedback.php",
       { feedback: $("#feedback_text").val() },
       function(data){
         $("#feedback_div").html("Thank you for your comment.");
         setTimeout(function(){ $("#feedback_div").hide('slow'); }, 2000);
       }
     );
    }
    </script>

</head><body>
<h2><noscript>
  </noscript>
</h2>
    
<div style="margin: 0px 0px 15px 15px;"></div>
    
<div id="feedback_div" style="margin: 0px 0px 15px 15px; display: none;"><form action="./feedback.php" method="get"><textarea id="feedback_text" rows="3" cols="40"></textarea><br><input value="Send comment" onclick="submitFeedback()" type="button"><input value="Hide form" onclick="hideFeedbackForm()" type="button"></form></div>
    
    <div id="tabs">
        <ul id="tabs_ul">
            <li id="textinput_tab">
                <a href="#" id="current" onclick="showtab(1); return false;">

                    Escreva um texto                </a>            </li>
            <li id="playback_tab">
                <a id="" href="#" onclick="showtab(2); return false;">
                    Visualizar                </a>            </li>
            <li id="info_tab"></li>
        </ul>
</div>

    
    <div style="display: block;" id="textinput_pane" class="tab_pane">
        <div id="input_text">
            Para teste escreva um texto aqui!<br>&nbsp;<br>
            <textarea id="input_text_ta" cols="70" rows="10">A maioria das pessoas, quando perguntada, diz que não gosta de ler, porque isto lhe dá sono. Na verdade, não é a leitura que dá sono, e sim o modo como ela é realizada. Devido ao modo como aprendemos a ler, as pessoas ficam com hábitos prejudiciais de leitura , tais como:

1) Sub-vocalização(leitura como os lábios ou com a garganta)
2) Leitura Linear (palavra por palavra)
3) Leitura desatenta (com constantes re-leituras do mesmo trecho, e uma baixa retenção do conteúdo lido)

Também em razão deste tipo de leitura, as pessoas acostumam-se a ler pouco, o que acarreta na maioria dos casos num pequeno repertório de palavras. Assim, qualquer palavra que desconheçam (devido a pouca leitura) provoca-lhe um desconforto interno incosciente, que elas (as pessoas) procuram justificar-se dizendo para si próprio e para os outros que não gosta muito de ler.

Existem, então, dois motivos básicos pelos quais você lê errado:

1) o modo como aprendeu a ler.
2) ler de modo inconstante.

Na verdade, um decorre do outro: você lê pouco, devido ao modo como aprendeu a ler. É claro que isto não significa que não saiba ler; isto significa apenas que, em sua aprendizagem, foi imposto um limite à sua velocidade de leitura, limite este que você jamais tentou superar.

Quando se ensina uma pessoa a ler, as palavras são divididas em sílabas, para facilitar a aprendizagem da leitura. Além disso, as palavras são lidas em voz alta, sílaba por sílaba. Infelizmente, depois de aprendida a leitura, as pessoas continuam a ler fazendo esta vocalização das palavras; mesmo que silenciosamente. Na verdade, este é o maior obstáculo à leitura rápida.

Para aprender a ler dinamicamente, de um modo veloz e produtivo, você deve mudar o seu método de leitura, o que se pode conseguir com um treinamento especial. Primeiro, você deve perder o hábito de sub-vocalizar as palavras. depois, deve habituar-se a enxergar o conjunto de palavras, ao invés das palavras isoladas. À medida que progredir nos exercícios, você conseguirá enxergar blocos cada vez maiores de palavras de uma só vez. Com o exercícios, você conseguirá enxergar blocos cada vez maiores de palavras de um só vez. Com os exercícios de atenção, aprenderá a aumentar a sua atenção durante a leitura, o que fará que retenha cada vez mais o conteúdo do que ler.

A velocidade que conseguir atingir, a par desta retenção de conteúdo, darão um prazer cada vez maior às suas leituras.

Faço os seus exercícios progressivamente, sem pressa e sem pular nenhum, de modo persistente. Escolha um lugar sossegado, e procure colocar-se de modo relaxado e receptivo, confiando que irá conseguir o que deseja. </textarea>
            <br>&nbsp;<br>
            
            <a href="#" onclick="startNewPlayback(); return false;" title="Começar" onmouseover="$(this).find('img').attr('src', 'ditador_arquivos/playthattext2.jpg'); return false;" onmouseout="$(this).find('img').attr('src', 'ditador_arquivos/playthattext.jpg'); return false;"><img src="ditador_arquivos/playthattext.jpg"></a>
        </div>
    </div>

    
    <div style="display: none;" id="playback_pane" class="tab_pane">
        <div id="display">input some text <br>and click "Play <br></div>
        
        <div id="viewerTa_div" class="controls_div">
          <div style="margin-bottom: 8px;"><a href="#" onclick="$('#viewer_ta').toggle();" style="text-decoration: none;"><b>Ocultar/Mostrar Scroller</b></a>. <small>(Esse recurso só funciona no Firefox e no Internet Explorer - A rolagem não aparece em outros navegadores!)</small></div>
            <textarea id="viewer_ta" rows="5" cols="70"></textarea>
        </div>

        
        <div id="playback_controls" class="controls_div">
            <table id="controls_table">
                <tbody><tr>
                    <td>
                        <a href="#" onclick="playButtonCallback(); return false;" class="playback_control_a"><img src="ditador_arquivos/play.gif"></a>
                        <a href="#" onclick="pauseButtonCallback(); return false;" class="playback_control_a"><img src="ditador_arquivos/pause.gif"></a>
                        <a href="#" onclick="rewindButtonCallback(); return false;" class="playback_control_a"><img src="ditador_arquivos/rewind.gif"></a>
                    </td>
                    <td>

                        <div class="ui-slider" id="slider_div">
                            <a href="#" style="border: medium none; outline-color: -moz-use-text-color; outline-style: none; outline-width: medium;"><div style="left: 70.07px;" class="ui-slider-handle"></div></a>
                        </div>
                    </td>
                </tr>
            </tbody></table>
        </div>
        
        <div id="settings" class="controls_div">
            <table id="settings_table">

                <tbody>
                    <tr>
                        <td>Números de Linhas (A): <input size="3" id="numLines" value="2" onchange="recomputeWpm()" type="text">&nbsp;&nbsp;</td>
                        <td>Palavras por linha (B): <input size="3" id="wordsPerLine" value="3" onchange="recomputeWpm()" type="text"></td>
                    </tr>
                    
                    
                    <tr>
                        <td>Grupos por minutos(C): <input size="3" id="groupsPerMinute" value="100" onchange="recomputeWpm()" type="text">&nbsp;&nbsp;</td>

                        <td>(Calculo) Palavras por minutos (A*B*C): <input size="3" value="600" id="wordsPerMinute" onchange="recomputeWpm()" disabled="true" type="text"></td>
                    </tr>
                    
                    
                    <tr>
                        <td style="text-align: left; font-weight: bold; font-size: 10pt;">
                            Você também pode pressionar para cima / baixo nas setas do teclado <br> para aumentar / diminuir a velocidade.
                      </td>
                        <td style="text-align: right;">
                            <input value="Salvar Modificações" onclick="changeSettingsButtonCallback();" type="button">

                        </td>

                    </tr>
                </tbody>
            </table>
        </div>

        <div id="colors_div" class="controls_div" style="padding: 5px 0pt;">
            Cor de Fundo: <input style="background-color: #FFFFFF; color: rgb(0, 0, 0);" autocomplete="off" class="color" id="bg_color" size="6" value="#FFFFFF">

            &nbsp;&nbsp;&nbsp;Cor do Texto: <input style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);" autocomplete="off" class="color" id="text_color" size="6" value="000000">
        </div>
    </div>
    
    <div style="display: none;" id="info_pane" class="tab_pane">
        <h3>&nbsp;</h3> 
        </body></html>
pagespecific.js 
// ---------------------------------------------------------------------------
// Functions that bind the UI to the Rsvp object

function extractSettings(){
    return {
            'numLines': parseInt($('#numLines').val()),
            'wordsPerLine': parseInt($('#wordsPerLine').val()),
            'groupsPerMinute': parseInt($('#groupsPerMinute').val())
        };
}

function changeSettingsButtonCallback(){
    var newSettings = extractSettings();
    
    if($("#display").data('rsvpInstance'))
        $("#display").data('rsvpInstance').changeSettings(newSettings);
    
    recomputeWpm();
}

function recomputeWpm(){
    var newSettings = extractSettings();

    $("#wordsPerMinute").val(
            newSettings.numLines *
            newSettings.wordsPerLine *
            newSettings.groupsPerMinute);
}

function _incrementSpeed(wpm_plus){
    var rsvpInstance = $("#display").data('rsvpInstance');
    
    if(rsvpInstance){
        newGpm = rsvpInstance.incrementSpeed(wpm_plus);
        $('#groupsPerMinute').val(newGpm);
        recomputeWpm();
    }
}

function startNewPlayback(){
    showtab(2);
    
    var oldInstance = $("#display").data(
        'rsvpInstance');
        
    if(oldInstance){
        oldInstance.destroy();
    }
    
    $('#viewer_ta').val($('#input_text_ta').val());
    
    var rsvpInstance = new Rsvp(
            $("#input_text_ta").val(),
            $('#display'),
            extractSettings(),
            $('#slider_div'),
            $('#viewer_ta')
        );

    $("#display").data(
        'rsvpInstance',
        rsvpInstance
    );
    
    rsvpInstance.start();
}

function handleSlideEvent(e, ui){
    var newValue = ui.value;

    var rsvpInstance = $("#display").data('rsvpInstance');
    
    if(rsvpInstance){
        if(!rsvpInstance.sliderEventDisabled){
            rsvpInstance.moveToPercentage(newValue / 200);
        }
    }
}

function playButtonCallback(){
    var rsvpInstance = $("#display").data('rsvpInstance');
    
    if(rsvpInstance){
        rsvpInstance.playOrResume();
    }
}

function pauseButtonCallback(){
    var rsvpInstance = $("#display").data('rsvpInstance');
    
    if(rsvpInstance){
        rsvpInstance.pause();
    }
}

function rewindButtonCallback(){
    var rsvpInstance = $("#display").data('rsvpInstance');
    
    if(rsvpInstance){
        rsvpInstance.rewind();
    }
}

$(function(){
    $('#slider_div').slider({ min: 0, max: 200, startValue: 0, slide: handleSlideEvent });
});

// ---------------------------------------------------------------------------
// Tabs and cosmetic code, unrelated to the Rsvp object

function _hideAllTabs(tabnum){
    $('#textinput_tab a').attr('id', '');
    $('#playback_tab a').attr('id', '');
    $('#info_tab a').attr('id', '');
    
    $('#textinput_pane').hide();
    $('#playback_pane').hide();
    $('#info_pane').hide();
}

function _getTab(tabnum){
    switch(tabnum){
    case 1: return $('#textinput_tab a');
    case 2: return $('#playback_tab a');
    case 3: return $('#info_tab a');
    }
}

function _getPane(tabnum){
    switch(tabnum){
    case 1: return $('#textinput_pane');
    case 2: return $('#playback_pane');
    case 3: return $('#info_pane');
    }
}

function _showOneTab(tabnum){
    var tab = _getTab(tabnum);
    var pane = _getPane(tabnum);
    
    tab.attr('id', 'current');
    pane.show();
}

function showtab(tabnum){
    _hideAllTabs();
    _showOneTab(tabnum);
}


function _keyupHandler(event){
    keycode = event.keyCode;

    if(keycode == 38){
        // up key
        _incrementSpeed(10)
    }else if(keycode == 40){
        // down key
        _incrementSpeed(-10)
    }

    return false;
}

function _setBgColor(color){
    $("#display").css("background-color", "#"+color);
    $("#viewer_ta").css("background-color", "#"+color);
}

function _setFgColor(color){
    $("#display").css("color", "#"+color);
    $("#viewer_ta").css("color", "#"+color);
}

$(function(){
    // To use the text given by the bookmarklet
    var qs = window.location.search;
    
    if(qs && qs.length > 1){
        $('#input_text_ta').val(decodeURIComponent(qs.substring(1)));
    }

    showtab(1);
    $(".playback_control_a img")
        .mouseover(function(){ $(this).css('background-color', '#888'); })
        .mouseout(function(){ $(this).css('background-color', '#aaa'); });

    $(document).keyup(_keyupHandler);

    $("#bg_color").change(
        function(){ _setBgColor(  $("#bg_color").val()  );  }
        );
    $("#text_color").change(
        function(){ _setFgColor(  $("#text_color").val()  );  }
        );

    $("#viewer_ta").keydown(_keyupHandler);
});
rsvp.js 
function Rsvp(text, targetDiv, settings, slider, viewerTa){
    this._text = text;
    this._targetDiv = targetDiv;
    this._slider = slider;
    this._viewerTa = viewerTa;
    
    this.changeSettings(settings);
    
    this._initializeFromText(text);
    
    this._nextWordIndex = 0;
    this._curTimeout = null;
    
    this.sliderEventDisabled = false;
    
    this._playing = false;
    
    this._destroyed = false;
}

Rsvp.fn = Rsvp.prototype;

Rsvp.fn._initializeFromText = function(text){
    // match a word and a bunch of non-word-stuff
    // "g" is important if we want lastIndex to be remembered in match object
    var regex = new RegExp("([^\\s]+)\\s+", "mg");

    this._words = [];
    this._wordPositions = [];
    
    var match = null;
    var i = 0;
    var lastLastIndex = 0;
    while((match = regex.exec(text)) != null){
        this._words[i] = match[1];
        this._wordPositions[i] = lastLastIndex;
        lastLastIndex = regex.lastIndex;
        i++;
    }
    
    // last word if there's some text remaining
    this._words[i] = text.substring(lastLastIndex);
    this._wordPositions[i] = lastLastIndex;
    
    i++;
    
    // To make the final iteration in selectRange work
    this._wordPositions[i] = text.length-1;
}

Rsvp.fn.destroy = function(){
    this.pause();
    
    this._destroyed = true;
}

Rsvp.fn.changeSettings = function(settings){
    this._numLines = settings.numLines;
    this._wordsPerLine = settings.wordsPerLine;
    this._groupsPerMinute = settings.groupsPerMinute;
    
    this._wordsPerGroup = this._numLines * this._wordsPerLine;
    
    this._msPerGroup = 60 * 1000 / this._groupsPerMinute;
}

Rsvp.fn.incrementSpeed = function(wpm_plus){
    this._groupsPerMinute += wpm_plus;

    if(this._groupsPerMinute < 1){
        alert("Minimum at 1 group per minute");
        this._groupsPerMinute = 1;
    }

    this._msPerGroup = 60 * 1000 / this._groupsPerMinute;

    return this._groupsPerMinute;
}

Rsvp.fn.start = function(){
    this._playing = true;
    
    this.nextFrame();
}

Rsvp.fn.nextFrame = function(){
    this.showTextRange();
    
    // Adjust slider
    this.sliderEventDisabled = true;
    
    var pos = (this._nextWordIndex - this._wordsPerGroup)
                / (this._words.length - this._wordsPerGroup)
                * 200;
    $(this._slider).slider("moveTo", Math.round(pos), 0);
    
    this.sliderEventDisabled = false;
    
    
    // Timer for next frame
    if(this._playing && this._nextWordIndex < this._words.length){
        this.setTimeout();
    }
}

Rsvp.fn.moveToPercentage = function(percent){
    var startWord = Math.floor(percent * this._words.length);
    
    // Round to correct start word (ie. if wordsPerGroup = 4,
    // we want groups to start at 0, 4, 8, ...)
    startWord -= startWord % this._wordsPerGroup;
    
    this.showTextRange(startWord);
}

Rsvp.fn.showTextRange = function(firstWordIndex){
    if(firstWordIndex === undefined)
        firstWordIndex = this._nextWordIndex;
    
    this._nextWordIndex = firstWordIndex;
    
    var resHtml = "";
    var firstWordBeginPos = this._wordPositions[firstWordIndex];
    for(var i=0; i<this._numLines; i++){
        for(var j=0; j<this._wordsPerLine; j++){
            if(this._nextWordIndex >= this._words.length){
                this._playing = false;
                break;
            }
            
            resHtml += this._words[this._nextWordIndex] + " ";
            
            this._nextWordIndex++;
        }
        
        if(this._nextWordIndex >= this._words.length){
            this._playing = false;
            break;
        }
        
        resHtml += "<br/>";
    }
    var lastWordEndPos = this._wordPositions[this._nextWordIndex];
    
    this.selectRangeInViewer(firstWordBeginPos, lastWordEndPos);
    
    $(this._targetDiv).html(resHtml);
}

Rsvp.fn.setTimeout = function(){
    if(this._destroyed)
        // no more setting of timeout after this point...
        // otherwise it might conflict with another object
        return;

    // make sure the old timeout is cleared, otherwise timers compete
    if(this._curTimeout)
        clearTimeout(this._curTimeout);
    
    var self = this;

    this._curTimeout = setTimeout(
            function(){ self.nextFrame(); },
            this._msPerGroup
        );
}

Rsvp.fn.pause = function(){
    clearTimeout(this._curTimeout);
    
    this._playing = false;
}

Rsvp.fn.playOrResume = function(){
    this._playing = true;
    
    this.setTimeout();
}

Rsvp.fn.rewind = function(){
    this._nextWordIndex = 0;
    
    this.nextFrame();
}

Rsvp.fn.selectRangeInViewer = function(start, end){
    var ta = $(this._viewerTa).get(0);

    if(!$(this._viewerTa).is(":visible")){
        return;
    }

    if (ta.createTextRange) {
        var oRange = ta.createTextRange();
        oRange.collapse(true);
        oRange.moveStart("character", start);
        oRange.moveEnd("character", end-start);
        oRange.select();
        
    } else if (ta.setSelectionRange) {
        ta.setSelectionRange(start,start+1);
    
        // causes scrolling to caret position in IE, seen there:
        // http://bytes.com/forum/thread496726.html
        // Only works in Firefox... Opera and Safari won't collaborate
        if(window.KeyEvent){
            var ev = document.createEvent ('KeyEvents');
            ev.initKeyEvent('keypress', true, true, window,
                                false, false, false, false, 0,
                                ta.value.charCodeAt(start));
            ta.dispatchEvent(ev);
        }
        
        ta.setSelectionRange(start, end);
    }
    //$(this._viewerTa).blur();

}

Sds,

Vagner Nunes

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...